Cet article a expliqué en détail le concept de mise en page réactif, les avantages et les inconvénients de la mise en page réactive, des concepts de conception et du code de mise en œuvre spécifique. C'est un article rare. Ici, nous le recommandons aux amis 1. Qu'est-ce que la disposition réactive?
La mise en page réactive est un concept proposé par Ethan Marcotte en mai 2010. En bref, un site Web peut être compatible avec plusieurs terminaux - plutôt que de faire une version spécifique pour chaque terminal.
Ce concept est né pour résoudre la navigation sur Internet mobile. La mise en page réactive peut fournir aux utilisateurs de différents terminaux avec une interface plus confortable et une meilleure expérience utilisateur. De plus, avec la vulgarisation actuelle des appareils mobiles à grand écran, il n'est pas exagéré de le décrire comme une tendance générale.
Comme de plus en plus de concepteurs adoptent cette technologie, nous voyons non seulement beaucoup d'innovations, mais aussi certains modèles formés.
2. Quels sont les avantages et les inconvénients de la disposition réactive? avantage:Forte flexibilité face à différents dispositifs de résolution
Peut résoudre rapidement des problèmes d'adaptation d'affichage multi-appareils
défaut:Compatible avec divers équipements, charge de travail élevée et faible efficacité
Le code est lourd, et les éléments cachés et inutiles apparaîtront, ce qui augmentera le temps de chargement.
En fait, il s'agit d'une solution de conception de compromis, qui ne peut pas obtenir les meilleurs résultats en raison de l'influence de plusieurs facteurs.
Dans une certaine mesure, la structure de mise en page originale du site Web sera modifiée et la confusion des utilisateurs se produira
3. Comment concevoir une disposition réactive?1. Comment résoudre le problème de compatibilité entre différents appareils?
La requête multimédia dans CSS3 peut résoudre ce problème.
2. Quelles valeurs peuvent obtenir les valeurs de la requête multimédia?
Largeur de l'appareil, le dispositif-heigth affiche l'écran / périphérique tactile.
Rendez la largeur et la hauteur de la fenêtre, Hegth affiche l'écran / dispositif tactile.
La direction portative de l'appareil, l'orientation horizontale ou verticale (portrait | lanscape) et l'imprimante, etc.
Rapport d'écran Imprimante de matrice de points d'aspect Ratio, etc.
Ratio de dispositif Imprimante de matrice de dispositif-ratio-dot, etc.
Couleur de l'objet ou couleur Couleur Couleur, l'index de couleur affiche l'écran.
Résolution de l'appareil
3. Structure et utilisation de la syntaxe
Syntaxe: @media Nom du périphérique uniquement (sélection de sélection) Not (sélectionnez la condition) et (condition de sélection de l'appareil), le périphérique deux {srules}
usage:
un. Exemple 1: Utilisez @media dans le lien:
<link rel = stylesheet type = text / css media = uniquement écran et (max-width: 480px), seul écran et (max-device-width: 480px) href = link.css rel = external nofollow />
Ce n'est que dans l'utilisation ci-dessus que vous pouvez être omise et limitée à un moniteur d'ordinateur. La première condition max-largeur fait référence à la largeur maximale de l'interface de rendu, et la deuxième condition maximale-apparence-largeur se réfère à la largeur maximale de l'appareil.
né Intégrer @media dans la feuille de style:
Copier le code