Media complet ou pas

bonjours juste pour savoir si c'est bien ou il faut modifier ou rajouter le css des media

/*********************************************************************************************************Début du desing Respensive Ecrans ordinateurs*********************************************************************************************************/
      @media (min-width: 1200px)
	  {
	  
	  
	  }

/*********************************************************************************************************Fin du desing Respensive Ecrans ordinateurs***********************************************************************************************************/






/*********************************************************************************************************Début du desing Respensive Ecrans ordinateurs*********************************************************************************************************/
	  
	  @media (min-width: 980px)
	  {
	  
	  
	  }
/*********************************************************************************************************Fin du desing Respensive Portables et tablettes*******************************************************************************************************/
      @media (min-width: 641px) and (max-width: 800px)
	  {
	  
	  
	  }



      @media (min-width: 801px) and (max-width: 1024px) 
	  {
	  
	  
	  }



      @media only screen and (min-width: 641px) and (max-width: 800px) 
	  {
	  
	  
	  }
      @media only screen and (min-width: 801px) and (max-width: 1024px)
	  {
	  
	  
	  }



/*********************************************************************************************************Début du desing Respensive Portable et tablette*******************************************************************************************************/

      @media (min-width: 768px) and (max-width: 979px)
	  {
	  
	  
	  }
/*********************************************************************************************************Fin du desing Respensive Portable et tablette*********************************************************************************************************/
/*********************************************************************************************************Début du desing Respensive Portable et tablette*******************************************************************************************************/

      @media (max-width: 767px)
	  {
	  
     }

/*********************************************************************************************************Fin du desing Respensive Portable et tablette*********************************************************************************************************/

/*********************************************************************************************************Début du desing Respensive Portables******************************************************************************************************************/

      @media (max-width: 480px)
	  {
	  
	  
	  }
/*********************************************************************************************************Fin du desing Respensive Portables********************************************************************************************************************/

si vous voyer d'autre ou a modifier

merci de me faire savoir

Ben alors Yvan, c'est pas terrible !

Blague à part, bonjour Yvan.
Je vais tenter d'éclaircir le chemin tracé par Olivier C quand il affirme qu'il ne faut pas établir ses breakpoints en fonction de la taille des terminaux mais en fonction du design du site. J'ajouterais même en fonctions des éléments qui composent le site.


Dans un premier lieu, que nous parlions le même langage, disons que ces termes correspondent à ces définitions.
Le terminal représente le support par lequel ton site sera affiché. Un matériel physique immuable. La liste est longue comme le bras mais le W3 les a référencés (rechercher W3C media queries). On trouve le smartphone, la tablette, tv, écran d'ordi etc
Les breakpoints ou points de ruptures sont une valeur qui va déclencher un changement de comportement. Par exemple définir @media all and (min-width: 600px) on défini un point de rupture à 600px.
Il n'y a aucune limite au nombre de points de rupture mise à part la douleur cérébrale maximale que le codeur peut supporter

Cela n'a aucun sens de définir ses breakpoints en fonction de la taille de media car cela suppose qu'on affirme que les utilisateurs naviguent sur nos sites :
- toujours en plein écran => ha ouais ben pas moi déjà alors je suis condamné à avoir un affichage dégradé ?
- que l'affichage plein écran couvre l'intégralité de la surface disponible => ha ouais donc pas d’ascenseur, pas de bord de fenêtre, pas de panneau de commande du navigateur etc...
- tous les media d'un même type ont la même résolution => huuum je me racle la gorge car des tablette possèdent des résolutions supérieures à des écran d'ordinateur, une télé est large mais la résolution est généralement faible à moyenne, certains smartphone haut de gamme ont des résolutions supérieurs à celles de tablettes etc...


La solution
Cette solution je vais l'illustrer par un cas sur lequel je travaille et pour lequel j'ai du trouver moi-même mes breakpoints (bah oui c'est pas des valeurs qu'on recopie depuis un tableau).
D'abord il faut connaître à l'avance le design recherché pour le site (la disposition générale) ; j'ai choisis un bandeau de toute la largeur suivi d'une zone centrale divisée en 2 colonnes: 1 large à gauche et une de largeur réduite à droite. Ca c'est une version disons écran d'ordi (je commence par le type desktop mais on peut tout à fait commencer par les smartphones ; perso je trouve que ça ne change rien).
Ensuite il faut se demander comment les éléments composants mes différentes paries vont s'enchainer. Dans mon cas j'ai choisi un affichage en enfilade pour les plus petits écrans puis divers états intermédiaires avant d 'arriver au modèle cité au départ.
C'est à ce moment que je suis en mesure de déterminer mes breakpoints car d'une part j'ai les éléments html, mes blocs qui ont besoin d'espaces minimums ; mes breakpoints vont me permettre de respecter cette contrainte. Et d'autre part les éléments "figés en taille" soit des éléments dont la taille est prédéfinie ou ne peut pas être plus petite que x (ce peut être une vidéo, une image ou autre).

Le résultat va t'étonner ! Oublie les "600px", "800px", "1024", "1280" etc En fait tes valeurs seront complètements différentes de ça donc sans rapport avec les dimensions des terminaux.

Techniquement L'idéal est de pouvoir moduler la taille de son affichage et observer en temps réel la réaction du design selon les dimensions.
Ça tombe très bien ! C'est sur Firefox (ça existe aussi sur Chrome et Opera mais je ne saurais t'expliquer comment l'activer).

Donc sur Firefox,
tu fais MAJ+F7 : ça ouvre la console développeur sur l'onglet Css ;
puis en haut à droite de cette fenêtre (si elle est placée horizontalement) il y a une icône avec des carrés imbriqués étiquetée "Vue adaptative".
Cet outil est formidable !


Alors ? T'y vois plus clair ?


PS : en anglais c'est " responsive sinon la traduction française est " adaptative(tif) "
et c'est " design " avec un gn qui font gneue. Aïe aïe aïe ça pique les yeux
Modifié par Greg_Lumiere (17 Mar 2016 - 18:42)

je me pose une question depuis x anée lol

http://mattkersley.com/responsive/
quand je met mon lien

avec

/* 3: min-width + max-width */
@media screen and (min-width: 1024px) and (max-width: 1280px) {
/*********************************************************************************************************Début du body******************************************************************************************************************************************/
      body
	  {
	  font-family:Arial, Helvetica, sans-serif;/* un font texte */
	  font-size:11px; /* taille du texte */
	  background-color:#0000FF; /* Couleur de fond */
	  color:#000000; /* couleur du texte */
	  }
/*********************************************************************************************************Fin du body********************************************************************************************************************************************/
}

là le cadre 1024 devient tout bleue là je suis ok avec vous le body et bleue jusqu'ici ok

mais si je rajoute une autre media par exemple

/* 2: min-width */
@media screen and (min-width: 800px) {
/*********************************************************************************************************Début du body******************************************************************************************************************************************/
      body
	  {
	  font-family:Arial, Helvetica, sans-serif;/* un font texte */
	  font-size:11px; /* taille du texte */
	  background-color:#006633; /* Couleur de fond */
	  color:#000000; /* couleur du texte */
	  }
/*********************************************************************************************************Fin du body********************************************************************************************************************************************/
}

mon cadre 1024 devient vert pour quoi ecrase la couleur bleue

merci de m'expliquer

Quand tu mets

@media screen and (min-width: 1024px) and (max-width: 1280px) {
 body {
  background: blue;
 }
}

tu donnes comme instruction

/* quand la largeur est comprise entre 1024 et 1280 pixels que sur un écran (c'est voulu ?), appliques la couleur de fond bleue à l'élément body  */

Ensuite tu dis

@media screen and (min-width: 800px) {
 body {
  background: green;
 }
}

tu donne ensuite l'instruction

/* quand la largeur est supérieure ou égale à 800 pixels sur écran, appliques la couleur de fond verte à l'élément body /*

Quand ta résolution est comprise entre 1024 et 1280 pixels, tes déclarations entrent en conflit car correspondent toutes les deux à ton media querie. Les styles s'appliquant en cascade, la dernière valeur de background écrase la précédente.

Il faut impérativement contrôler que les breakpoints ne présentent pas de trou et n'entrent pas en conflit vis-à-vis des propriétés qu'elles concernent.

Je vois plus quelque-chose comme ça

@media screen and (min-width: 800px) and (max-width: 1280px) {
      body
	  {
	  font-family:Arial, Helvetica, sans-serif;/* un font texte */
	  font-size:11px; /* taille du texte */
	  color:#000000; /* couleur du texte */
	  }
}
@media screen and (mins-width: 801px) and (max-width: 1023px) {
 body {
  background-color:#006633; /* Couleur de fond */
 }
}
@media screen and (min-width: 1024px) and (max-width: 1280px) {

      body
	  {
	  background-color:#0000FF; /* Couleur de fond */
	  }
}

ici on a couvert la plage 800 -> 1280px, à toi de définir le reste.

PS je reviens sur le media screen c'est voulu d'adresser ton css uniquement aux écrans d'ordinateur ? Car je ne sais pas si tu sais mais là tu kick téléphones, tv etc.
Edit: autant pour moi, c'est voulu. Je viens de remarquer sur le premier post que tu fais la distinction matérielle.
Modifié par Greg_Lumiere (17 Mar 2016 - 19:52)

en faite j’aimerais juste les media

ecrant pc et tablette si tout et pour les portable je verais après
avant j'ai ça

/*********************************************************************************************************Début du desing Respensive Ecrans ordinateurs*********************************************************************************************************/
      @media (min-width: 1200px)
	  {

     }

/*********************************************************************************************************Fin du desing Respensive Ecrans ordinateurs***********************************************************************************************************/
/*********************************************************************************************************Début du desing Respensive Ecrans ordinateurs*********************************************************************************************************/
	  
	  @media (min-width: 980px)
	  {

     }
/*********************************************************************************************************Fin du desing Respensive Portables et tablettes*******************************************************************************************************/

/*********************************************************************************************************Début du desing Respensive Portable et tablette*******************************************************************************************************/

      @media (min-width: 768px) and (max-width: 979px)
	  {


      }

/*********************************************************************************************************Fin du desing Respensive Portable et tablette*********************************************************************************************************/
/*********************************************************************************************************Début du desing Respensive Portable et tablette*******************************************************************************************************/

      @media (max-width: 767px)
	  {
	  

     }

/*********************************************************************************************************Fin du desing Respensive Portable et tablette*********************************************************************************************************/

/*********************************************************************************************************Début du desing Respensive Portables******************************************************************************************************************/

      @media (max-width: 480px)
	  {
	  
	  }

/*********************************************************************************************************Fin du desing Respensive Portables********************************************************************************************************************/

je ne sais pas si c'est bon ou il faut rajoute une ou média en plus

j'ai eu ce code par un ami en 2010

donc je voudrais voir si ca suffit pour afficher sur un ecrant pc et tablette et voir portable

merci

Greg_Lumiere a écrit :
PS je reviens sur le media screen c'est voulu d'adresser ton css uniquement aux écrans d'ordinateur ? Car je ne sais pas si tu sais mais là tu kick téléphones, tv etc.

En théorie, oui, en pratique, media screen sert souvent à faire le distingo entre print ou pas print.

- "handheld" semble n'avoir jamais vraiment été utilisé par les mobiles,
- "tv"... j'ai envie de dire que de toute façon il faut passer par un ordi alors...
- "projection" peut-être éventuellement utile pour un rendu plus spécifique, ainsi que les autres médias qui devrons de toute façon être spécifiés à part.

Media screen me semble donc être un bon choix, sauf quand on cible les media directement dans la feuille de styles.

Olivier C a écrit :

- "handheld" semble n'avoir jamais vraiment été utilisé par les mobiles,

Justement je me demandais si je ne devais pas utiliser cette distinction dans mes feuilles. Ceci répond à cela.

Olivier C a écrit :
Media screen me semble donc être un bon choix

Certes mais perfectible. En effet, cette distinction inclue-t-elle ou exclue-t-elle les autres media ?
Dans la mesure où les styles ne seraient pas étendus à tous les media, que se passe-t-il pour le visiteur (peut-être un sur la decennie, peut-importe) qui visite le site via un media non prit en charge ?

N'est-il pas plus judicieux d'utiliser @media all ?
Modifié par Greg_Lumiere (18 Mar 2016 - 09:13)