7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. CSS

Un guide rapide des points de rupture verticale

Read Time: 1 min

French (Français) translation by Daszie Chan (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

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.