Accentsconagua

Petite astuce un cours intensif dans les requêtes multimédia CSS

Code
Share

Dans le passé, pour créer des mises en page basées sur la largeur du navigateur de l'utilisateur, nous devions utiliser JavaScript, éventuellement combiné à un langage côté serveur. Heureusement, le processus est en train de devenir beaucoup plus simple, grâce aux requêtes de médias CSS.


Abonnez-vous à notre page YouTube pour voir tous les tutoriels vidéo!
Préfère regarder cette vidéo sur Screenr?

Méthode 1: dans votre feuille de style 

 @Média et (min-width: 1200px) / * faisons quelque chose * /

Méthode 2: importer à partir de votre feuille de style 

 @import url (small.css) screen et (min-width: 1200px);

Notez que vous pouvez également ajouter des règles d’ajout en appliquant une virgule, comme si vous utilisiez plusieurs sélecteurs..

Méthode 3: Lien vers une feuille de style

Méthode 4: cibler l'iPhone

Une note intéressante, après quelques recherches sur le Web, est que, malgré le fait que l’iPhone 4 affiche une résolution de 640x960, nous continuons de le prendre mobile.css, référencé dans le code ci-dessus. Comme c'est étrange? Si vous avez plus d'informations à ce sujet, s'il vous plaît laissez un commentaire pour le reste d'entre nous!

Navigateurs prenant en charge les requêtes de média CSS

  • Firefox 3.5+
  • Opera 9.5+
  • Safari 3+
  • Chrome
  • Internet Explorer 9+

Veuillez noter qu'Internet Explorer 8 et les versions ultérieures ne prennent pas en charge les requêtes de média CSS. Dans ces cas, vous devez utiliser une solution de secours JavaScript..

Code
×