Home > Développement > CSS > Responsive

Responsive

Head HTML

Si le mobile a un ratio de 3 et une largeur de 360px, sa largeur CSS sera 3*360 = 1080px ; la ligne meta permet de garder 360px.

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

Application d’une feuille de style en fonction du périphérique :

<link rel="stylesheet" media="print" href="" />

Balises structurantes

@media screen and (min-width: 360px) and (max-width: 610px) {
    footer, article {
        width: auto;
        margin: 1%;
    }
}

Media queries

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width: 321px) {}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width: 320px) {}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {}