Responsive Design. Technologies du web. Stéphane Bouvry, 2014

Transcription

1 Responsive Design Technologies du web Stéphane Bouvry, Objectif Utilisation de CSS pour la mise en page 2. Diapos Le responsive design : 3. Grille fluide Dans cette partie, nous allons créer pas-à-pas notre propre grille fluide. Préparation Créez 2 fichiers : grid.html grid.css La grille que nous allons réaliser permettra de diviser l'espace d'affichage en 12 colonnes. Vous verrez que la somme des colonnes sera toujours égale à 12. Ajoutez ce code au fichier CSS, il permettra de visualiser les différentes colonne de la grille en mettant une couleur en arrière-plan..col12 { background-color: rgba(124,176,69,0.08);.col11 { background-color: rgba(124,176,69,0.16);.col10 { background-color: rgba(124,176,69,0.24);.col9 { background-color: rgba(124,176,69,0.32);.col8 { background-color: rgba(124,176,69,0.40);.col7 { background-color: rgba(124,176,69,0.48);.col6 { background-color: rgba(124,176,69,0.56);.col5 { background-color: rgba(124,176,69,0.64);.col4 { background-color: rgba(124,176,69,0.72);.col3 { background-color: rgba(124,176,69,0.80);.col2 { background-color: rgba(124,176,69,0.88);.col1 { background-color: rgba(124,176,69,1);

2 Vous pourrez le supprimer une fois la grille prête. La grille Ajoutez maintenant ce code au HTML : <div class="col6">col 6 <div class="col6">col 6 La classe CSS row sera utilisée pour faire un clearfix (voir diapos sur la mise en page) Puis modifier ensuite le CSS pour obtenir un affichage en colonne en utilisant la technique des float comme nous l'avons vu dans les ateliers précédents. Vous ajusterez la largeur des colonnes en pourcent. Modifiez ensuite le fichier HTML en ajoutant ce code, et complétez le CSS : <div class="col6">col 6 <div class="col3">col 3 <div class="col3">col 3 puis ajoutez : <div class="col4">col 4 <div class="col4">col 4 <div class="col4">col 4 Voici enfin le code HTML complet à faire fonctionner :

3 <div class="col12">col 12 <div class="col11">col 11 <div class="col1">col 1 <div class="col10">col 10 <div class="col2">col 2 <div class="col9">col 9 <div class="col3">col 3 <div class="col8">col 8 <div class="col4">col 4 <div class="col7">col 7 <div class="col5">col 5 <div class="col6">col 6 <div class="col6">col 6 Vous devrez obtenir le résultat suivant : Grille fluide Lors de l'affectation de la largeur, il est recommandé d'utiliser de longues décimal par exemple :.col5 { width: %; 4. Medias queries

4 Les medias queries sont des blocs de code CSS qui ne vont s'appliquer qu'en fonction de certaines conditions. Elles se pésentent sour la forme <CONDITION> { /* Règles CSS si <CONDITION> est vrai */ Les medias queries sont utilisées pour faire du Responsive Design (Web adaptatif) afin d'adapter la mise en page des documents Web à la taille de l'écran. Produisez le HTML suivant : <div> <span class="petit">petit</span> <span class="moyen">moyen</span> <span class="grand">grand</span> Le code qui suit va permettre de modifier la couleur de fond des span en fonction de la largeur de l'écran. /* largeur jusqu'à 480px (max-width: 480px) {.petit { background: #FF6600; /* Entre 481px et 800 (exclus) (min-width: 481px) and (max-width: 799px) {.moyen { background: #FF6600; /* 800 et plus (min-width: 800px) {.grand { background: #FF6600; Exercice Modifier le HTML de cette façon :

5 <div> <span class="petit">petit</span> <span class="moyen">moyen</span> <span class="grand">grand</span> <span class="tresgrand">tres GRAND</span> Puis modifier le CSS pour obtenir les effets suivant : Le span correspondant a un texte blanc sur fond vert Le span ne correspondant pas a un texte blanc sur fond rouge Les tailles doivent correspondrent à : petit : 0 à 480 moyen : 480 à 768 grand : 769 à 1167 très grand : 1168 et plus Web adaptatif dans firefox Firefox (et chrome sour la forme d'un addon) propose un assistant pour visualiser un document web dans différents format. Vous pouvez l'activer dans la barre de développement (icône web adaptatif) 5. Synthèse Téléchargé le ZIP à l'adresse puis modifiez le fichier CSS pour obtenir une version mobile du site comme dans l'aperçu ci-dessous :

6 Résultat Dans la version mobile, vous pourrez choisir de cacher l'aside contenant les archives et les autres articles.