Navigate Space

La liste d'utilisateurs n'est pas rendue car vous ne possédez pas les droits d'accès nécessaires pour afficher les profils utilisateur.
Pages enfant
  • Initiation RWD : Aide, outils, ressources

Comparaison des versions

Légende

  • Ces lignes ont été ajoutées. Ce mot a été ajouté.
  • Ces lignes ont été supprimées. Ce mot a été supprimé.
  • La mise en forme a été modifiée.

...

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. 

Les unités relatives

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
themeEclipse
languagehtml/xml
titleStructure HTML
linenumberstrue
<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
themeEclipse
languagecss
titleCSS
linenumberstrue
.wrapper {
   width: 1200px;
}
.content { 
   width: 900px;
}
.menu {
   width: 300px;
}

...