Contrôles d’adaptivité (Responsive)

Responsive signifie que votre design s’adapte aux différents écrans et appareils - depuis les grands écrans des ordinateurs de bureau ou portables jusqu’aux écrans plus petits des tablettes et des smartphones.

Vous obtenez un design responsive en changeant les styles des éléments en fonction de la largeur de la fenêtre du navigateur – par exemple en empilant les colonnes et en utilisant une police plus petite en-dessous d’une certaine largeur.

Prévisualiser en différentes largeurs

Pour prévisualiser votre design en différentes largeurs, cliquez sur n’importe quel élément puis cliquez l’icône “appareil” sur la gauche pour ouvrir le menu déroulant Device.

Puis choisissez une largeur dans ce menu déroulant pour prévisualiser votre design pour cette largeur.

Par défaut, Oxygen montre votre prévisualisation responsive sur une largeur d’un pixel de plus que la largeur juste en-dessous de celle que vous avez choisie.

Pour ajuster la largeur de prévisualisation, cliquez sur la règle responsive en bas de l’écran et tirez vers la gauche ou la droite.

Créer des styles responsives

Avec Oxygen, la plupart des propriétés des éléments peuvent avoir des valeurs différentes en fonction des tailles des fenêtres des navigateurs.

Pour ajuster la valeur d’une propriété pour une largeur donnée, sélectionnez la largeur d’écran que vous voulez utiliser dans le menu déroulant Device.

Toutes les modifications que vous allez effectué sur la propriété en cours pour la largeur spécifiée ne seront prises en compte que pour cette largeur d’écran et celles inférieures.

Cacher ou montrer des éléments en fonction de la largeur d’écran

Pour cacher un élément en-dessous d’une certaine largeur d’écran, choisissez la largeur d’écran pour laquelle vous voulez cacher l’élément depuis le menu déroulant Device. Avec Advanced > Layout, mettez la visibilité (Display) sur none.

Pour montrer un élément uniquement en-dessous d’une certaine largeur, choisissez All devices dans le menu déroulant device et mettez la propriété Display sur none. Puis choisissez la largeur en-dessous de laquelle vous voulez faire apparaître l’élément et remettez la propriété Display sur flex, ou inline-flex, ou block, ou inline-block, ou inline en fonction de votre besoin.

Colonnes responsives

L’élément Columns d’Oxygen est responsive par défaut et vous pouvez utiliser les paramètres pour personnaliser et gérer la disposition et l’ordre de vos colonnes pour les écrans plus petits.

• Stack Vertically Below – en-dessous de la largeur d’écran retenue, les colonnes s’empileront verticalement.
• Reverse Column Order Below – en-dessous de la largeur d’écran retenue, les colonnes se présenteront dans l’ordre inverse. Cette possibilité est utile pour créer une disposition dans laquelle les colonnes avec mise en page alternée sont empilées verticalement de manière cohérente.
• 50% Width Below – cette option est utile pour les designs avec de nombreuses colonnes (quatre ou plus) en permettant de réduire de 50 % la largeur des colonnes sur les écrans de largeur moyenne et de les empiler verticalement sur les petits écrans.

Menus responsives

L’élément Menu d’Oxygen est responsive par défaut et se transformera en menu hamburger pour les largeurs d’écran inférieures à 992 px.

Ceci peut se personnaliser via la commande Primary > Mobile Responsive.

D’autres paramètres sont disponibles pour personnaliser les styles de menu, les styles d’icônes et pour montrer ou cacher les menus déroulants dans le menu responsive.

Supprimer des styles responsives

Pour supprimer les styles responsives créés pour une largeur particulière, cliquez sur l’icône Device pour ouvrir le menu déroulant. Puis cliquez la croix rouge à côté de la largeur d’écran pour supprimer tous les styles créés pour cette largeur d’écran.

En savoir plus

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

IMA / Ph. Reskator