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.
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.
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.
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.
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.
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.
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.
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
IMA / Ph. Reskator