Bonjour     visiteurs jour : 49     Total clics   :   1210475       Sites associés 

Les joies de l'informatique et de l'internet !





Coucou et merci


 
Clics 407

CSS3 : les Media-Queries

Questions sur le média qui affiche mla page web pour identifier ses caractéristiques

 !-- Media Query CSS dans un élément link --
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

!-- Media Query CSS dans une feuille de style -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

@media (min-width: 700px) and (orientation: landscape) {…}

Les listes séparées par des virgules se comportent comme l'opérateur logique or quand utilisé dans 
une media query. Quand vous utilisez une liste de media queries séparées par des virgules, 
si une des media queries est vrai, les styles ou la feuille de style seront appliqués. 


changer la couleur de fond initialement blanche de la page lorsque la taille de la fenêtre du navigateur passe au dessous des 800 pixels de large.

 
body {background-color:white;color:black;}
@media only screen and (max-width:800px)    {
  body {background-color:black;color:white}
}
 

Le "viewport" est la partie visible de l'écran.
Un androïd a un viewport de 800px, mais un iphone4 en a un de 980px. Dans le 1er cas le fond sera donc noir alors que dans le second il sera blanc... 

 

body {background-color:white; color:black;}
@media only screen and (max-device-width:480px)   {
  body {background-color:black;color:white}
}
Avec cet exemple à 480px un androïd aura un fond noir en orientation portrait et blanc en orientation paysage. 
Selon le navigateur utilisé, un refresh pourra être nécessaire pour visualiser le résultat.
avec 980px tous les mobiles actuels seront concernés (arrivéee des écrans de 5,5 pouces)



Une feuille de styles de base pour le Web mobile

<meta name="viewport" content="width=device-width">
<link rel="styleesheet" media="screen" and (max-width: 640px)" href="smallscreen.css" />

body {font-size:100% }
@media only screen and (max-device-width:980px) {
    body { font-size:120%; }
}

source mammouthland CSS débutant voir également Alsacreation Les médias queries

Juslisen CSS media queries

Merci à Alsacretauon pour ce bel exemple d'adaptation

  Site "Mobile Friendly"             CSS3 : Media-Queries


CSS3 Media-Queries

Vos messages sont modérés.   Les visiteurs non inscrits ont leur pseudo préfixé par x_.   Merci de respecter la loi et les personnes.

Votre message -->

Classement
par date
croissante.
décroissante.
Vous
inaugurez
ce forum,
félicitations.
Pseudo     Le 19-2-2018.   Titre  

 

Total des visiteurs  :    482971   dont aujourd'hui :   49    En ligne actuellement :  1      Total des clics   1210475