2010-06-20 7 views
1

est-il possible de se comporter en fonction de la résolution de l'utilisateur?Vérifiez la résolution des utilisateurs en CSS?

+2

Bien sûr. http://www.google.com/search?q=Check+users+resolution+in+css –

+2

Je ne comprends pas pourquoi les gens ajoutent +1 au commentaire ci-dessus. Non seulement il est intelligent et inutile, mais aussi faux! @Casey s'il y a un moyen de le faire dans css permet de voir votre réponse. –

+0

Oui, le commentaire est fondamentalement faux. Cependant, si vous devez vous comporter en fonction de la résolution de l'utilisateur, vous avez probablement un problème avec votre code. –

Répondre

7

Pas avec CSS, no. Mais avec JS, bien sûr.

if (window.screen.width <= 800 && window.screen.height <= 600) { 
    //do something(); 
} 
0

Vous ne pouvez pas vérifier la résolution avec CSS. Mais vous pouvez créer des conceptions fluides.

Jetez un coup d'œil à Little boxes pour quelques bons débutants.

Grz, Kris.

0

Vous ne pouvez pas faire cela en CSS standard. Peut-être que ce sera OK dans (seulement) les navigateurs IE.

Vous pouvez utiliser JavaScript.

6

requêtes média CSS3 vous permettra d'appliquer des règles ou de feuilles de style @media selon la taille du client, entre autres propriétés.

Ils ne se replient pas dans les navigateurs non-compatibles, donc ils ne sont pas mûrs pour une utilisation générale, mais si vous êtes jeune, il peut être utile d'apprendre comment cela est fait.

http://www.w3.org/TR/css3-mediaqueries/

Pour appliquer une feuille de style à un document lorsqu'il est affiché sur un écran supérieur à 800 pixels de large:

<link rel="stylesheet" media="screen and (min-device-width: 800px)" > 

Pour appliquer une feuille de style à un document lors de l'affichage sur un appareil moins 400 pixels de large:

<link rel="stylesheet" media="all and (max-device-width: 400px)" > 

Cette requête multimédia règles pour l'écran exprime et les appareils portatifs si la largeur de t La fenêtre d'affichage est supérieure à 20em.

@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... } 

La valeur 'em' est relative à la taille de la police de l'élément racine.