Media Queries

Portrait de Jenny
Soumis par Jenny le 5 déc 2014 - 12:36

Tags:

Source: http://fr.slideshare.net/ucbdrupal/bdug-responsive-webtheming20120723

CSS3 étend les fonctions des requètes médias (media queries):

  • vérification des fonctions (d'un média particulier) comme largeur, hauteur et couleur (width, height, color)
  • styles sur mesure pour des devices

règle @import : par ex   @import url(style480min.css) screen and (min-width: 480px);

Utilisé dans l'attibut media de <link> : par ex
<link rel="stylesheet" type="text/css" media="screen and (min-width: 480px)" href="style480min.css" />

Utilisé dans une feuille de style (pour zen responsive-sidebars.css) voir ex p 10/35 du slideshow (probablement sass 3.1)

 

type de media queries

Source: http://thesassway.com/intermediate/responsive-web-design-part-2

SCSS compile en
Ex, font-size d'un h1 plus large pour seulement les grands écrans 
// set a variable for the font size
$h1-size: 36px

h1 {
  font-size: $h1-size;
}

// this will only affect wide screens
@media screen and (min-width: 1024px) {
  h1 {
    font-size: $h1-size * 1.5;
  }
}
 
h1 {
  font-size: 36px;
}
@media screen and (min-width: 1024px) {
  h1 {
    font-size: 54px;
  }
}

@media Bubbling avant ssas 3.2 => http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32

variables dans les requetes (sass 3.2)

SCSS compilation 
$break-small: 320px;
$break-large: 1200px;

.profile-pic {
  float: left;
  width: 250px;
  @media screen and (max-width: $break-small) {
    width: 100px;
    float: none;
  }
  @media screen and (min-width: $break-large) {
    float: right;
  }
}

profile-pic {
  float: left;
  width: 250px;
}
@media screen and (max-width: 320px) {
  .profile-pic {
    width: 100px;
    float: none;
  }
}
@media screen and (min-width: 1200px) {
  .profile-pic {
    float: right;
  }
}
 
$information-phone: "only screen and (max-width : 320px)";

@media #{$information-phone} {
  background: red;
}

@media only screen and (max-width : 320px) {
  background: red;
}

 

SCSS compile
variables de chaque côté de la virgule dans une requête (pour cadres flexibles) 
$width-name: max-device-width;
$target-width: 320px;

@media screen and ($width-name : $target-width) {
  background: red;
}

@media screen and (max-device-width: 320px) {
  background: red;
}

// math on variable in a query
@media screen and ($width-name : $target-width + 1) {
  background: red;
}

@media screen and (max-device-width: 321px) {
  background: red;
}

 

Variables dans les requêtes, en utilisant @content

Utilisation de blocs @content dans un mixin. Là on fait un pas de plus.

On part de breakpoints habituels (320, 480, 720)

SCSS compile
Variables dans les requêtes, en utilisant @content 
$break-small: 320px;
$break-large: 1024px;

@mixin respond-to($media) {
  @if $media == handhelds {
    @media only screen and (max-width: $break-small) { @content; }
  }
  @else if $media == medium-screens {
    @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) { @content; }
  }
  @else if $media == wide-screens {
    @media only screen and (min-width: $break-large) { @content; }
  }
}

.profile-pic {
  float: left;
  width: 250px;
  @include respond-to(handhelds) { width: 100% ;}
  @include respond-to(medium-screens) { width: 125px; }
  @include respond-to(wide-screens) { float: none; }
}
 
.profile-pic {
  float: left;
  width: 250px;
}
@media only screen and (max-width: 320px) {
  .profile-pic {
    width: 100%;
  }
}
@media only screen and (min-width: 321px) and (max-width: 1023px) {
  .profile-pic {
    width: 125px;
  }
}
@media only screen and (min-width: 1024px) {
  .profile-pic {
    float: none;
  }
}

...

 

On the web

specs w3c http://www.w3.org/TR/css3-mediaqueries/#media1 surtout largeur, hauteur, orientation, et le rapport