Une brève discussion sur les compétences du didacticiel layout_html5 réactif html5

1. Qu'est-ce que la mise en page réactive ?

Le responsive layout est un concept proposé par Ethan Marcotte en mai 2010. Bref, cela signifie qu'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 Internet mobile. La mise en page réactive peut offrir une interface plus confortable et une meilleure expérience utilisateur aux utilisateurs de différents terminaux. Avec la popularité actuelle des appareils mobiles à grand écran, il n'est pas exagéré de la décrire comme une tendance générale.

À mesure que de plus en plus de designers adoptent cette technologie, nous constatons non seulement beaucoup d'innovation, mais également des modèles de formation.

2. Quels sont les avantages et les inconvénients de la mise en page réactive ?

Avantages :

Forte flexibilité face à des appareils avec des résolutions différentes
Peut résoudre rapidement le problème de l'adaptation de l'affichage multi-appareils
Inconvénients :

Compatible avec divers appareils, charge de travail lourde et faible efficacité
Le code est encombrant, des éléments inutiles cachés apparaîtront et le temps de chargement est allongé
En fait, il s'agit d'une solution de conception de compromis, qui est affectée par de nombreux facteurs. Résultats moins qu'optimaux
Cela modifie dans une certaine mesure la structure de mise en page originale du site Web, ce qui peut prêter à confusion pour l'utilisateur

3. Comment concevoir une mise en page réactive ?

1. Comment résoudre les problèmes de compatibilité entre les différents appareils ?

Media Query en CSS3 peut résoudre ce problème.

2. Quelles valeurs peuvent être obtenues par media query ?

La largeur et la hauteur de l'écran d'affichage/dispositif haptique de l'appareil.

La largeur et la hauteur de la largeur de la fenêtre de rendu, la hauteur de l'écran d'affichage/du dispositif tactile.

L'orientation manuelle de l'appareil, l'orientation horizontale ou verticale (portrait|paysage) et l'imprimante, etc.

Imprimante matricielle à rapport d'aspect, etc.

Imprimante matricielle à rapport d'aspect et rapport d'aspect, etc.

Couleur de l'objet ou couleur de la liste de couleurs, l'index des couleurs est affiché à l'écran.

La résolution de l'appareil

3. Structure grammaticale et usage

Syntaxe : nom de l'appareil @media uniquement (condition de sélection) et non (condition de sélection) et (condition de sélection de l'appareil), appareil deux {sRules}

Utilisation :

a. Exemple 1 : Utilisez @media dans le lien :

                   

omis UNIQUEMENT dans l'utilisation ci-dessus, limitée aux écrans d'ordinateur. La première condition Max-Width fait référence à la largeur maximale de l'interface de rendu, et la deuxième condition MAX-DEVIDE-WIDTH fait référence à la largeur maximale de l'appareil.

b. Intégrez @media dans la feuille de style :

Copier le code

Le code est le suivant :

@media (min-device -width : 1024px) et (max-width :989px),écran et (max-device-width :480px),(max-device-width :480px)
et (orientation :paysage),(min-device- width:480px ) et (max-device-width:1024px) et (orientation:portrait) {srules}

        設定了電腦顯示器解析度（寬度）大於或等於1024px（且最大可見寬度為989px）；屏寬在480px及其以下手持裝置；屏寬在480px以及橫向（即480尺寸平行於地面）放置尺寸平行於地面）放置尺寸平行於地面）放置尺寸並平行於地面）的手持設備；

        屏寬大於或等於480px小於1024px以及                           

   四、實現響應式佈局

複製代碼

代碼如下:

br />







">http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3- mediaqueries.js">>