Adaptatif est un ensemble de modèles qui s'adaptent à tous les terminaux, mais la disposition vue sur chaque appareil est la même, communément appelée largeur adaptative.
Un ensemble de modèles réactifs s'adapte à tous les terminaux, mais la mise en page vue par chaque appareil peut être différente.
Bien que la conception Web réactive/adaptative présente des inconvénients tels qu'une lourde charge de travail de compatibilité avec divers appareils, un code fastidieux et un temps de chargement long, elle est multiplateforme et terminale, peut être conçue une seule fois, est universellement applicable et peut être adaptée en fonction des besoins. La résolution de l'écran, le zoom automatique des images et l'ajustement automatique des mises en page ne sont pas seulement des implémentations techniques, mais aussi une nouvelle façon de penser le design.
La solution pour de nombreux sites Web consiste à fournir différentes pages Web pour différents appareils, par exemple en fournissant une version mobile dédiée ou une version iPhone/iPad. Bien que cela garantisse l'effet, cela est plus gênant et nécessite de maintenir plusieurs versions en même temps. De plus, si un site Web dispose de plusieurs portails, cela augmentera considérablement la complexité de la conception architecturale.
L'adaptation pose toujours un problème. Si l'écran est trop petit, même si la page Web peut être adaptée à la taille de l'écran, le contenu sera trop encombré lorsqu'il sera visualisé sur un petit écran. La réactivité est un concept dérivé pour résoudre ce problème. problème. Il peut reconnaître automatiquement la largeur de l'écran et ajuster la conception Web en conséquence. La mise en page et le contenu affiché peuvent changer.
Expérience adaptative http://m.ctrip.com/html5/ Expérience réactive http://segmentfault.com/
Jardin secret CSS http://www.csszengarden.com/
http://caibaojian.com/demo/ued/
2. Connaissance de base de la réactivité 1. Définir la balise méta<meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no>
Plusieurs paramètres de ce code sont expliqués :
§width = device-width : La largeur est égale à la largeur de l'appareil actuel
§initial-scale : mise à l'échelle initiale (le paramètre par défaut est 1,0)
§minimum-scale : L'échelle minimale à laquelle l'utilisateur est autorisé à zoomer (la valeur par défaut est 1,0)
§maximum-scale : L'échelle maximale sur laquelle l'utilisateur est autorisé à zoomer (définie par défaut sur 1,0)
§ évolutif pour l'utilisateur : indique si l'utilisateur peut zoomer manuellement (la valeur par défaut est non, car nous ne voulons pas que les utilisateurs effectuent un zoom avant ou arrière sur la page)
2. Requête média La requête média CSS3 est un facteur clé dans la réalisation d'un design réactif. Vous pouvez utiliser la fonctionnalité de requête multimédia pour que la page utilise différents blocs CSS en fonction de la largeur de l'appareil.
Les règles CSS suivantes prendront effet lorsque la largeur de l'écran est inférieure ou égale à 980 :
@media (orientation:portrait) et (max-width:460px) { .video .innerBox .news a.more { display: none; } .video .innerBox .news span { display: none } .video .innerBox .news; { largeur : 100 % ; } .video .innerBox .news ul { largeur : 100 % ; }}orientation : portrait |
portrait:
Spécifie que la hauteur de la zone visible de la page dans le périphérique de sortie spécifié est supérieure ou égale à la largeur
paysage:
À l'exception de la valeur portrait, ils sont tous en paysage
Sélectionnez Charger CSS pour charger le fichier smallScreen.css si la largeur de l'écran est comprise entre 400 pixels et 600 pixels.
<link rel=stylesheet type=text/cssmedia=screen et (min-width : 400px) et (max-device-width : 600px) href=smallScreen.css />
3. Disposition en pourcentage
3. Conception de pages, polices et traitement d'image réactifs1. Processus de conception d'une page réactive html5/css3
Étape 1 : Déterminez le type d'appareil et la taille d'écran qui doivent être compatibles : y compris les appareils mobiles (téléphones mobiles, tablettes) et les PC. Pour les appareils mobiles, veillez à ajouter des fonctions gestuelles lors de leur conception et de leur mise en œuvre.
Taille de l'écran : y compris différentes tailles d'écran de téléphone portable (y compris horizontal et vertical), différentes tailles de tablette (y compris horizontale et verticale), des écrans d'ordinateur ordinaires et des écrans larges.
Étape 2 : Créez différents prototypes filaires pour les tailles déterminées. Vous devez tenir compte de la manière dont la mise en page change sous différentes tailles, de la manière de redimensionner la taille du contenu, de la suppression des fonctions et du contenu, et même de la manière de fonctionner dans des environnements spéciaux. Conception spécialisée, etc. Ce processus nécessite une communication étroite entre les concepteurs et les développeurs front-end.
Étape 3 : Conception visuelle. Importez les images sur l'appareil correspondant pour quelques tests simples, qui peuvent nous aider à détecter le plus tôt possible les problèmes d'accessibilité, de lisibilité, etc.
Par rapport au développement Web traditionnel, les pages de conception réactive présentent des changements dans la mise en page et la taille du contenu, de sorte que le résultat final est plus susceptible de différer considérablement du projet de conception, ce qui nécessite davantage de communication entre les développeurs front-end et les concepteurs.
2. Polices réactives
Comparaison entre plusieurs unités différentes en CSS
px : pixels. Unité de longueur relative, la taille est déterminée par la résolution de l'écran. (Coopération aux demandes des médias)
em : unité de longueur relative. Équivalente à la taille de police du texte dans l'objet actuel, ou relative à la taille de police par défaut du navigateur si la taille de police actuelle pour le texte en ligne n'est pas définie. La valeur de em n'est pas fixe, elle hérite de la taille de police de l'élément parent. Tous les navigateurs non modifiés sont conformes à : 1em=16px. Puis 12px=0,75em, 10px=0,625em. Afin de simplifier la conversion de la taille de la police, vous devez déclarer Font-size=62,5% dans le sélecteur de corps en CSS, ce qui fait que la valeur em devient 16px*62,5%=10px, donc 12px=1.2em, 10px=1em , c'est-à-dire également qu'il vous suffit de diviser votre valeur px d'origine par 10, puis de la remplacer par em comme unité.
rem : une nouvelle unité relative en CSS3. La principale différence avec em est que lorsque vous utilisez rem pour définir la taille de la police d'un élément, il s'agit toujours d'une taille relative, mais elle est uniquement relative à l'élément racine HTML. On peut dire que cette unité combine les avantages de la taille relative et de la taille absolue. Grâce à elle, vous pouvez ajuster toutes les tailles de police proportionnellement en modifiant uniquement l'élément racine, et vous pouvez éviter la réaction en chaîne consistant à composer les tailles de police couche par couche. Actuellement, tous les navigateurs, à l'exception d'IE8 et des versions antérieures, prennent en charge rem. Pour les navigateurs qui ne le prennent pas en charge, la solution est très simple : écrire une instruction d’unité absolue supplémentaire. Ces navigateurs ignorent les tailles de police définies avec rem.
% : De plus, nous pouvons également utiliser un pourcentage pour spécifier la taille, qui représente le multiple de la police actuelle par rapport à la taille de police par défaut du navigateur. Cette unité est également fréquemment utilisée dans la conception de pages réactives.
html{font-size:62,5%;/* 10÷16=62,5% */}body{font-size:12px;font-size:1.2rem;/* 12÷10=1,2 */}p{font-size :14px;taille de police:1.4rem;}Il convient de noter que pour être compatible avec les navigateurs qui ne prennent pas en charge rem, nous devons écrire la valeur px correspondante devant rem, afin que les navigateurs qui ne le prennent pas en charge puissent être rétrogradés gracieusement. En fait, vous n'avez pas à vous soucier trop de savoir si vous devez utiliser la taille de police par défaut : 100 % ou la définir sur taille de police : 62,5 %. Si vous introduisez un outil de prétraitement CSS, vous pouvez naturellement utiliser la valeur par défaut. . Si vous utilisez font-size: 62.5% pour d'autres raisons Il n'y a rien de mal à cela, vous pouvez réinitialiser la taille de police par défaut dont vous avez besoin dans le corps.
3. Traitement réactif des images et des vidéos
http://alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html#
1. Image d'arrière-plan ---- requête multimédia
2. Liquéfaction de l'image ---- image élastique
img, objet { largeur maximale : 100 % ;}https://www.filamentgroup.com/examples/responsive-images/3.Élément HTML5 <image>
L'élément HTML5 <picture> peut définir plusieurs images.
Prise en charge du navigateur
<image> <source srcset=images/img_smallflower.jpg media=(largeur maximale : 400px)> <source srcset=images/img_flowers.jpg> <img src=images/img_flowers.jpg style="marge : 0px ; remplissage : 0px ; contour : aucun ; hauteur de ligne : 25,2 px ; taille de police : 14 px ; largeur : 660 px ; débordement : caché ; clair : famille de polices : tahoma, arial, Microsoft YaHei ;"><script src=http://cdn.gbtags.com/picturefill/2.0.0/picturefill.min.js></script>4. Utilisez les balises noscript pour créer des images réactives
Chargement dynamique Js de grandes et petites images
<span class=img-placeholder></span><noscript data-mobilesrc=small.jpg data-fullsrc=big.jpg data-alttext=votre classe de texte alternatif=responsivize> <img src=big.jpg></noscript > <script type=text/javascript>var responsiveImageTag = { replaceInitialImages:function(respons) { var platform = desktop; resImage = '.'+respons; var responsiveImages = $(resImage); var i, noOfresponsiveImages = responsiveImages.length; //Test de la largeur actuelle du périphérique d'affichage if(screen.width <= 767){ //767px, plus petit que l'ipad tous pensent que c'est mobile platform = mobile; } //définir l'élément source initial sur l'image pour (i = 0; i < noOfresponsiveImages; i = i + 1 ){ var noScriptElem = $(responsiveImages[i]); var img = window.document.createElement(img); = mobile){ img.src = noScriptElem.attr(data-mobilesrc }else{); img.src = noScriptElem.attr(data-fullsrc); } img.className = responsive $('.img-placeholder').eq(i).html('').append(img); ); } }};responsiveImageTag.replaceInitialImages('responsivize');$(window).resize(function(){ responsiveImageTag.replaceInitialImages('responsivize');});</script>4. Cadre réactifPersonnalisation : si votre site Web comporte un grand nombre de conceptions diverses, alors si vous souhaitez toujours utiliser bootstrap, vous devez modifier le framework comme couche inférieure : un grand nombre de styles doivent être copiés et la hiérarchie CSS est déroutante et difficile à entretenir.
Dans certaines situations, le bootstrap est très utile. Par exemple, si vous souhaitez créer rapidement un site Web personnel, un site Web d'entreprise, une interface de gestion backend de blog et d'autres projets relativement beaux qui ne nécessitent pas de personnalisation de page élevée, ils sont souvent plus adaptés aux projets backend. styles de concession et ne sont pas faciles à approfondir les détails. Ou vous n'avez peut-être pas d'expérience dans la création d'un front-end de site Web, compte tenu de la compatibilité des navigateurs et des innombrables tailles d'appareils, Bootstrap résoudra une grande partie des problèmes pour vous.