...
Qu'est ce que le viewport ? On pourrait résumer cela à la fenêtre d'affichage/une surface d'affichage du site. L'article comprendre "Comprendre le viewport dans le web mobile vous " vous aidera à comprendre les concepts liés à cette balise HTML.
Il arrive régulièrement que cela soit source de problème lors de la réalisation de sites responsives et le site mydevice.io permet d'avoir un récapitulatif complet des configurations caractéristiques du navigateur affichant dans lequel est affiché cette page.
Voici un autre article de la documentation Apple résumant le fonctionnement du viewport sur ses terminaux.
Avant tout toute chose, nous vous conseillons la lecture d'un petit article nommé "the Lenghts of CSS" qui vous rappellera les possibilités offertes par CSS afin de spécifier une taille.
...
Imaginons un site avec une structure comme ci-dessous
Bloc de code | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
<div id="header" class="wrapper"></div> <div class="wrapper"> <div class="content"></div> <div class="menu"></div> </div> <div class="footer" class="wrapper"></div> |
...
Le code CSS associé :
Bloc de code | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
.wrapper { width: 1200px; } .content { width: 900px; } .menu { width: 300px; } |
...