Détecter les dimensions du navigateur avec CSS3

Lorsque nous commençons carrément dans le monde de conception réactive il est important de savoir quelles sont les nouvelles règles de CSS3, cela nous aide à détecter les dimensions de l'écran sur lequel le site Web ou l'application est visualisé.
L'une de ces règles est @moitié, qui avec la combinaison appropriée de conditions nous permet de connaître la taille de l'écran en tant que tel, et en fonction du résultat, de prendre les mesures pertinentes concernant sa conception.

Utilisation des requêtes média

Créons un code HTML simple et là, nous allons inclure notre feuille de style, qui contiendra les règles de notre signifie vouloir, Voyons voir:

 Détecter les dimensions de l'écran 

Comme on peut le voir, c'est un code assez simple, cependant il y a plusieurs choses à souligner. Le premier est inclus dans les étiquettes style, là nous avons deux règles, la première indique qu'à partir de 600 pixels la couleur de fond de notre texte sur l'étiquette h1 Il deviendra bleu, voyons quand nous redimensionnons dans le navigateur et ce changement prend effet :

La deuxième règle indique que si la largeur maximale est 400 pixels la couleur de fond du texte passera au rouge, ce qui indique une troisième condition, puisque tout en dessous de 400 pixels sera rouge et au-dessus de 600 sera bleu, donc de 401 à 599 pixels il gardera la couleur blanche par défaut, voyons :

Enfin, si nous diminuons beaucoup plus l'écran de notre navigateur, nous entrerons la règle pour notre couleur de fond rouge, voyons à quoi cela ressemble :

On voit alors que détecter les dimensions de notre navigateur est une tâche extrêmement simple grâce à CSS3, quelque chose qui est extrêmement utile lorsque nous travaillons avec des conceptions réactives et que nous devons connaître les dimensions du navigateur de l'utilisateur pour appliquer des styles qui rendent notre site Web attrayant sur n'importe quel appareil et résolution d'écran existante.