Share
J'ai vu cela se produire plusieurs fois récemment, généralement sur des sites Web avec une navigation fixe sur le côté gauche. Ils auront de jolies dispositions fluides, qui s’étendent sur de grands écrans et s’empilent sur des appareils plus petits, mais ils tombent tout de même sous un point de rupture sournois auquel peu de gens pensent. Je prends à propos de viewport la taille.
Laisse moi te donner un exemple. Voici une mise en page réactive simple; deux colonnes qui se comportent exactement comme vous le souhaitiez. Faites grandir et rétrécir le navigateur et vous verrez ce que je veux dire..
Cette mise en page commence en premier sur mobile, avec les deux div empilés les uns sur les autres. Il se divise ensuite en colonnes, avec sa colonne gauche fixe, en écrans d’une largeur minimale de 800 pixels..
Écran @média et (largeur minimale: 800 pixels)
Le contenu principal défile vers le haut et le bas, tandis que la première colonne reste fixe à gauche. Nous pouvons placer une navigation dans la colonne de gauche, peut-être un avatar, ce genre de chose.
Tout semble aller bien, mais regardez ce qui se passe lorsque nous réduisons notre navigateur verticalement; la navigation devient cachée et inaccessible.
En réalité, je ne connais personne qui navigue de la sorte, mais nous ne pouvons néanmoins pas supposer qu'un écran large signifie automatiquement un écran grand aussi..
Les requêtes multimédia sont capables d’identifier bien plus que la largeur de la page; ils peuvent réagir à densité de pixels, orientation, si l'écran est Couleur ou monochrome, la ratio d'aspect, charges de choses.
Dans ce cas, nous pouvons compter sur le simple hauteur min, en ajoutant une deuxième condition à notre requête média existante:
Écran @média et (largeur minimale: 800 pixels) et (hauteur minimale: 500 pixels)
Maintenant, notre arrangement colonne fixe-gauche ne prendra effet que lorsque l'écran sera plus large que 800px et au moins 500px de haut. Découvrez la démo et voyez par vous-même.
Nous n'avons pas à modifier complètement la mise en page pour rendre notre menu accessible. Nous pourrions à la place ajouter une barre de défilement distincte à la colonne de navigation lorsque la fenêtre d'affichage n'est pas assez haute pour tout révéler..
Écran @média et (hauteur maximale: 500px) .col-first hauteur: 100%; débordement: scroll;
Il s'agit de résoudre les problèmes de la manière la plus appropriée..
Une fenêtre d'affichage peu profonde peut vraiment limiter ce qui est visible sur une page Web. Voyez comment Gmail réduit le remplissage de la table s’il ya moins d’immobilier vertical:
Cet exemple de Gmail prouve qu’un point de rupture n’est pas nécessairement synonyme de mise en page. cassé, au lieu de le voir comme une occasion d'améliorer les choses.
Quoi qu’il en soit, j’espère que cela a réaffirmé l’importance de ne rien assumer en ce qui concerne les points de rupture. Faites-nous savoir dans les commentaires si vous avez déjà utilisé hauteur min questions des médias, et pour quoi!
Accentsconagua