Choisir un cadre mobile ou tablette
Un cadre vous permet de regarder la même page à une autre largeur. Il sert à vérifier votre mise en page avant de la publier : un titre tient-il encore correctement ? Les boutons restent-ils visibles ? Une grille devient-elle facile à lire sur téléphone ?
Changer de cadre ne crée pas une autre page et n’ajoute pas de règle de style.
1. Choisir un format d’écran
Lecture impossible. Réessayez avec les commandes vidéo.
Dans Design, ouvrez Écran. Pour travailler sur un seul format, désactivez Tailles d’écran multiples si cette option est cochée. Choisissez ensuite la largeur souhaitée.
La démonstration passe par un téléphone à 375 px, une tablette à 768 px et un cadre à 1024 px. Le contenu reste identique ; sa disposition s’adapte à la largeur disponible.
Ces formats sont des points de contrôle pratiques, pas une liste de tous les appareils de vos visiteurs. Un téléphone ou une fenêtre de navigateur peut avoir une largeur intermédiaire.
2. Vérifier les largeurs intermédiaires
Lecture impossible. Réessayez avec les commandes vidéo.
Un bon rendu dans deux cadres prédéfinis ne suffit pas à vérifier toutes les tailles possibles. Dans Écran, choisissez Personnalisé. Une règle apparaît à côté de la page. Cliquez sur la largeur indiquée, saisissez la valeur en pixels, puis appuyez sur Entrée.
La démonstration contrôle 430 px, puis 900 px. Regardez les retours à la ligne des titres, les boutons et les images. Vous pouvez aussi faire glisser la règle pour explorer les largeurs entre deux formats. Le champ accepte une largeur comprise entre 320 et 2560 px.
La taille du cadre et le zoom de travail ont des rôles différents : la première change la largeur utilisée pour calculer la mise en page ; le second change la taille à laquelle vous regardez ce cadre.
3. Revenir au cadre navigateur
Ouvrez de nouveau Écran, puis choisissez Navigateur. La page reprend la largeur disponible dans votre espace de travail.
Vous pouvez alterner entre ce cadre et les formats fixes autant que nécessaire. Ce sont des préférences de travail ; elles ne modifient pas le contenu de la page.
4. Comprendre ce qui change réellement
Un cadre montre le résultat des styles déjà présents. Si vous ajoutez ensuite une couleur ou une taille sans choisir de condition, le réglage peut rester commun à plusieurs écrans. Le simple fait de regarder le téléphone ne limite pas automatiquement une modification au téléphone.
Pour changer le design selon la largeur, suivez les règles d’écran. Pour travailler avec plusieurs rendus visibles en même temps, utilisez la comparaison des écrans.
Avant de publier, contrôlez plusieurs largeurs et les tailles intermédiaires. Vérifiez notamment les titres, les images, les menus et les boutons.