Quelles sont les meilleures pratiques pour la feuille de style par défaut lors de l'utilisation des requêtes @media CSS?

Question

Je viens de découvrir CSS @media requêtes et je pense qu'ils sont génial! Cependant, je sais que tous les navigateurs les soutiennent (à savoir tous, mais les versions les plus récentes de i.e..).

Que dois-je faire alors, dans ma feuille de style par défaut? Dois-je cibler un écran de taille normale? Dois-je aller la route du plus petit dénominateur commun et de charger la feuille de style mobile? Ou devrais-je faire de la conception tout à fait fluide?

Ce qui est généralement un bon plan au moment de la feuille de style par défaut pour les navigateurs qui ne prennent pas en charge les requêtes @media?

Answer 1

Cela dépend si vous allez avec de « premier mobile » approche ou « bureau d'abord ».

Le bureau premier ne devrait pas causer de problème avec les navigateurs de bureau ne supportant pas @media, car ils vont tout simplement ignorer les règles de stylesheet mobiles, comme ils le devraient. Le seul problème est que les navigateurs mobiles ne prennent pas en charge les demandes des médias. Ils rendront la page comme vu sur le bureau. Mais la plupart des smartphones prennent en charge les requêtes des médias, à l'exception des téléphones pré-win7. La question est de savoir si vous voulez soutenir ces téléphones. Vous devriez styleSheet ressembler à quelque chose comme ça.

body {
  width: 960px;
  margin: 0 auto;
}
@media only screen and (max-width: 500px) {
  /* override desktop rules to accommodate small screens*/
  body{
    width: auto;
    margin: 0;
}

L'autre approche est le premier mobile. Vous créez une feuille de style de base pour mobile, puis utiliser pour pimenter pense media queries pour les utilisateurs de bureau. Vous pouvez mettre les règles de bureau dans un fichier séparé, et utiliser des requêtes des médias et des commentaires conditionnels pour le charger dans les navigateurs de bureau modernes et IE. Mais le problème ici est mobile IE prend également en charge des commentaires conditionnels, donc pas de support téléphonique pré-win7. Votre html devrait ressembler à:

<link rel="stylesheet" href="/css/basic.css" />
<link rel="stylesheet" href="/css/desktop.css" media="all and (min-width: 500px)" />
<!--[if lt IE 9]>
<link rel="stylesheet" href="/css/desktop.css" />
<![endif]-->

Rendre votre fluide de conception vous aidera beaucoup. Le but est que peu importe quelle taille d'écran, votre site sera toujours bon. Il suffit de redimensionner la fenêtre pour essayer. dessins fluides ne peuvent pas faire bouger votre barre latérale vers le bas si l'écran est de réduire. Pour cela, vous devez media queries.

Bonne chance