Un guide rapide des points de rupture verticale
() translation by (you can also view the original English article)
Bienvenue dans un autre tutoriel screencast Envato Tuts + ! Dans cette vidéo je vais faire une introduction rapide à l’utilisation des points CSS de rupture verticale.
Les points de rupture sont synonymes de responsive web design; ce sont les points où vous choisissez de modifier la disposition d’un dessin ou modèle. Par exemple, 768px est une largeur de fenêtre couramment utilisée, au-dessous de laquelle vous pouvez organiser votre mise en page pour les appareils mobiles, et au-dessus de laquelle vous pourriez penser un peu plus en termes d'ordinateur de bureau.
Toutefois, les points de rupture ne ne s’appliquent qu’horizontalement, à la largeur de la fenêtre; ils peuvent entrer en vigueur pour un certain nombre de raisons différentes. Dans ce tutoriel, nous allons nous pencher sur les points d’arrêt verticaux, qui sont appliqués en relation avec la hauteur de la fenêtre. Nous les utilisons avec les propriétés min-height
et max-height
dans les requêtes de support CSS. Jetons-y un regard plus profond.

Dans cette vidéo, nous examinerons les scénarios suivants :
- Changer les tailles d’espacement et de la police dans les petites fenêtres.
- Ajuster la taille de la navigation mobile dans les petites fenêtres.
- Faire un en-tête ou un pied de page fixe lorsqu’il y a assez de place.
- Réglage des sections plein écran pour les petites fenêtres.
N’oubliez pas de télécharger les fichiers sources pour suivre en même temps.
Lectures en plus
- Responsive Web DesignAstuce : Ayez une pensée pour les points de rupture verticaleIan Yates
- Responsive Web DesignLes element queries : L'avenir du Responsive Web DesignLouie Rootfield
- Responsive Web DesignNouveau cours : Responsive Web Design revisitéAndrew Blackman
- SassSimplifier vos Media Queries avec Sass « Breakpoint »Joren Van Hee