Dans la seule et unique feuille de style pour Protostar, layout.css, les appels @media pour Protostar sont les suivants:
@media (min-width: 768px) and (max-width: 979px) @media (max-width: 767px) @media (max-width: 480px) @media (min-width: 768px) and (max-width: 979px) @media (min-width: 1200px) @media (max-width: 979px) @media (min-width: 980px) @media (max-width: 767px) @media (max-width: 980px)
Je montre cela surtout pour répéter où les points d'arrêt se trouvent pour les appels @media : 1200px, 980px, 768px, 480px.
Si vous étudiez la feuille de style template.css pour Protostar, vous pourrez voir une partie des appels @media se répeter. Je pense qu'il s'agit de regrouper certaines fonctionnalités. Vous pourrez aussi voir plus loin des appels @media surcharger les paramètres précédents. Cela m'intrigue, à ce stade, mais je suis sûr qu'il doit y avoir une raison.
Si vous souhaitez remplacer ces paramètres, je suggérerais que vous insériez une feuille de style personnalisée dans la section <head> de index.php plutôt que de modifier template.css. Je préconise ceci pour deux raisons. Un, vous saurez exactement quels styles vous modifiez si elles sont dans une feuille de style distincte. Deux, si vous mettez à niveau votre site Joomla, vos styles personnalisés peuvent être facilement reproduits et ne seront pas supprimés lors du remplacement template.css.
Certaines classes ont leurs paramètres d'affichage modifiés à ces points d'arrêt. Les choses sont ainsi activés ou désactivés.
Écrans larges
Au-dessus de 767px, pour les mises en page statiques, la largeur de .container est sur une largeur de 940px. Le r églage pour .row-fluid est width: 100%; et tous les réglages de .row-fluid [class*=".span"] (chaque classe commençant avec .span) sont en pourcentage.
Les balises <ul><li> sont agrémentées d'un float: left et ils se positionnent horizontalement dans la div .navigation.
max-width: 767px;
Pour la mise en page statique, la largeur de .container est défini sur 724px.
Si vous affichez un site Protostar sur une tablette ou un téléphone ou même une fenêtre de navigateur rétrécie, avec la disposition statique sélectionnée, vous verrez qu'il y a un petit coussin de chaque côté du conteneur. À 767px et en dessous, le body a un padding-left et padding-right de 20px.
Ce que vous devriez noter avec les largeurs entre 767px et 480px sont les balises du menu horizontal <ul><li>. Ceux-ci restent à la même largeur que sur un écran large, Mais ils peuvent s'enrouler et former deux lignes s'il en existe un certain nombre. La hauteur de la div .navigation s'agrandit pour accueillir les deux lignes.
max-width: 480px;
Sur des largeurs d'écran très étroits, la largeur de .container est réglée sur Auto, ce qui signifie qu'il va maintenant diminuer en taille proportionnellement à la taille de l'écran.
La partie .row-fluid est réglée sur 100% (ce qui ne change pas vraiment d'avant) mais plus important encore, tous les paramètres de .row-fluid [class*=".span"] sont width: auto. C'est ce qui contrôle l'empilement sur des largeurs d'écran plus étroites.
À des largeurs supérieures à 480px, les largeurs de ces classes dans .row-fluid sont fixées en pourcentages. Cela est vrai à la fois pour la mise en page statique et la mise en page fluide.
Les balises du menu horizontal <ul><li> sont maintenant empilées verticalement car float:none; leur est assigné et ils s'élargissent à la largeur de la div .navigation
