Outils pour utilisateurs

Outils du site


cours2012:concepts_et_outils_pour_internet:responsive_design

Voir cette page sous forme de diaporama.

Responsive Design

Demo

Comment tester

Comment cela fonctionne

  • Media Query :
    • Tester la taille, résolution et orientation du périphérique
  • Configurer le “viewport” :
    • Dire de désactiver les automatismes d'adaptation : 980px (sauf Android avant V4)

Media Query

Alsacreation : Les Media Queries CSS3

Viewport

Deux articles de références :

En une ligne :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Seulement si vous avez fait un site qui s'adapte aux petites tailles (h:320px,v:480px). Sinon :2)

<meta name="viewport" content="width=1024">

Avec pour largeur la plus petite taille que vous supportez.

Comment faire ? (Pour un site existant)

  • Vous le faites déjà ! (séparer la mise en page dans un fichier CSS)
  • Faire des maquettes à différentes largeurs
  • Configurer le viewport pour gérer vous même les petites résolutions
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • Écrire des “media query” pour appliquer les mises en page correspondantes
<!-- pour tous grand écran et mobile -->
<link rel="stylesheet" href="css/style-mise-en-page.css">
<!-- uniquement mobile -->
<link rel="stylesheet" href="css/style-mise-en-page-mobile.css" 
   media="only screen and (min-device-width: 480px)">

Comment faire ? (Pour un nouveau site)

  • Mobile First :
    • puis penser à comment utiliser la place si plus grand que :
@media (min-width:500px) {
    #programme article {
        display: table-cell;
        padding: 0 1rem;
    }
}
cours2012/concepts_et_outils_pour_internet/responsive_design.txt · Dernière modification: 2017/11/27 15:38 par pracht