30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Web Design
  2. CSS
Webdesign

Un guide rapide des points de rupture verticale

by
Difficulty:IntermediateLength:QuickLanguages:

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
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.