Le responsive design avec les media queries en css !

Adapter son site aux mobiles avec les media-queries Aujourd’hui, ne pas avoir un site adapté aux mobiles n’est pas concevable. Tous les sites Web aujourd’hui devraient prendre en considération l’aspect « responsive design ». Le responsive design, c’est quoi ? Le responsive design ou responsive webdesign (site mobile) est une technique de conception d’ un site web, visant à ce que le site et son contenu, s’adaptent automatiquement à la résolution écran du terminal qui est utilisé pour le visiter (tablettes, smartphones…). On facilite l’accès et l’expérience utilisateur en fonction de l’appareil utilisé par ce dernier. Pour se faire, on utilisera les dernières techniques de programmation web en HTML 5 et les « media queries » en CSS3 qui permettent de modifier …

Votes sur cet article

La balise HTML “meta viewport”

La balise meta-viewport Déclarer la balise  meta viewport dans votre doc html   Dans le responsive design, vous devez placer la balise meta viewport qui permet de définir les dimensions d’une page web pour l’affichage sur les  mobiles :  la largeur, la hauteur et le zoom sur la page, de manière à ce que le visiteur sur son utilisation mobile ne zoome pas pour rendre une page lisible. Pour les supports mobiles ou tablettes vous pouvez contrôler l’apparence de l’affichage initial de la page en utilisant la balise HTML META avec l’attribut name à viewport et dont l’attribut content pourra contenir plusieures propriétés séparées par des virgules : width, height, initial-scale, maximum-scale, minimum-scale, user-scalable. Par défaut la taille du viewport d’un terminal mobile ne correspond ni à la …

Votes sur cet article

CSS responsive avec les boîtes flexibles (flexbox)

CSS responsive avec les flexbox Propriétés display (flex, table-cell, inline-block) On connaît le modèle d’une boîte classique (bloc) et ses différents types de positionnement possibles (float, block…). Avec le flexbox CCS3, on met de côté le raisonnement avec block, inline, float pour utiliser le modèle de boîtes flexibles Dans cet exemple, on utilisera selon les éléments les propriétés display: flex; , display: table-cell; et display: table; See the Pen grilles en responsive CSS by EASY CSS (@easycss) on CodePen.   Vous pouvez essayer ces exemples, simplement en jouant avec la taille de votre écran sur desktop   Propriétés flex, flex-wrap et flex-direction Dans cet exemple, on utilisera les propriétés display: flex;, flex, flex-direction: row; et flex-wrap: wrap;   See the Pen OpJOjJ by EASY CSS (@easycss) on …

Votes sur cet article