Mise en page CSS mise en page statique, mise en page adaptative, mise en page fluide, mise en page réactive, mise en page flexible

(Tutoriel recommandé : Tutoriel vidéo CSS)

Mise en page statique (Mise en page statique)

Dans la conception Web traditionnelle, la taille de tous les éléments de la page Web utilise px comme unité.

1. Caractéristiques de la mise en page : Quelle que soit la taille du navigateur, la mise en page de la page Web sera toujours affichée selon la mise en page lorsque le code a été initialement écrit. Les sites Web PC conventionnels sont tous statiques (largeur fixe), c'est-à-dire que la largeur minimale est définie. Dans ce cas, si la largeur est inférieure à cette largeur, une barre de défilement apparaîtra. sera centré et l’arrière-plan sera ajouté. Ce type de conception est courant côté PC.

2. Méthode de conception :

• PC : mise en page centrée, tous les styles utilisent la largeur/hauteur absolue (px), concevez une mise en page, lorsque la largeur et la hauteur de l'écran sont ajusté, utilisez les barres de défilement horizontale et verticale pour afficher les parties masquées

• Appareils mobiles : créez également un site Web mobile, concevez une mise en page distincte et utilisez différents noms de domaine tels que wap . ou m.

Deux façons d'utiliser la mise en page statique dans le développement mobile : (De : Quelle est la différence entre la mise en page de flux et la conception Web réactive ?)

(1) dans Définir la largeur =320 sur la balise méta de la fenêtre d'affichage, et chaque élément de la page utilise également px comme unité. En utilisant JS pour modifier dynamiquement l'échelle initiale de l'étiquette, la page est mise à l'échelle proportionnellement afin qu'elle remplisse tout l'écran. (Voir développement front-end - changement de l'application Web)

(2) Définissez le contenu "width=640, user-scalable=no" sur la balise méta de la fenêtre d'affichage, et chaque élément de la page utilise également px comme l'unité. Puisque 640px dépasse la largeur du téléphone mobile, le navigateur réduira automatiquement la page en plein écran (pour plus de détails, voir le contenu "width=640, user-scalable=no", puis concevra un px de taille fixe. ? - Développement front-end)

• Avantages : Cette méthode de mise en page est la plus simple pour les concepteurs et les rédacteurs CSS, et il n'y a aucun problème de compatibilité

• <.>Inconvénients : évidents, bien sûr. Il ne peut pas fonctionner différemment en fonction de la taille de l'écran de l'utilisateur

Actuellement, la plupart des sites Web de portail et la plupart des sites de promotion de PC d'entreprise adoptent cette disposition de taille de pixel fixe. Les pages Web sont le moyen le plus simple de faire correspondre des affichages de taille de pixel fixe, mais cette méthode n'est pas une méthode de production entièrement compatible pour les futures pages Web. Nous avons besoin d'un moyen de nous adapter aux appareils inconnus (mise en page liquide)

<.>

La caractéristique de Liquid Layout (également appelé "Fluid") est que la largeur des éléments de la page est ajustée en fonction de la résolution de l'écran, mais la disposition globale ne change pas. Représente le système de clôture (système de grille). 🎜> Utilisez des pourcentages pour la taille des principales zones divisées de la page Web (utilisés avec les attributs min-* et max-*. Par exemple, définissez la largeur du corps de la page Web sur 80 %. -width est de 960px. L'image est également traitée de la même manière (largeur : 100 %, la largeur maximale est généralement définie sur la taille de l'image elle-même pour éviter qu'elle ne soit étirée et déformée 1. : écran. Lorsque la résolution change, la taille des éléments sur la page changera mais la mise en page ne changera pas [Cela empêchera les éléments de s'afficher correctement si l'écran est trop grand ou trop petit]

2. Méthode de conception : utilisez le pourcentage. La largeur et la hauteur sont pour la plupart fixes en px, qui peuvent être ajustées en fonction de la taille en temps réel de la fenêtre et de l'élément parent, et sont souvent contrôlées par des attributs tels que max-width/. min-width pour s'adapter autant que possible à différentes résolutions. La plage de flux de taille doit éviter d'être trop grande ou trop petite pour affecter la lecture

Cette méthode de mise en page a été utilisée au début de l'histoire du front-end Web. développement pour faire face à différentes tailles d'écrans de PC (la différence de taille d'écran n'était pas trop grande à l'époque) est également une méthode de mise en page couramment utilisée dans le développement mobile d'aujourd'hui, mais ses inconvénients sont évidents : le principal problème est que si le la taille de l'écran est trop grande, elle ne s'affichera pas correctement sur un écran trop petit ou trop grand par rapport à sa conception d'origine en raison de la largeur. Utilisez la définition en pourcentage, mais la hauteur et la taille du texte sont principalement fixées en px, Ainsi, l'effet d'affichage sur un téléphone mobile à grand écran sera tel que la largeur de certains éléments de la page sera très étirée, mais la hauteur et la taille du texte seront toujours les mêmes qu'avant (c'est-à-dire que ces choses ne peuvent pas être rendues "fluides"). et l'affichage est très choquant.

Mise en page adaptative

La caractéristique de la mise en page adaptative est de définir des mises en page pour différentes résolutions d'écran, c'est-à-dire de créer plusieurs mises en page statiques, chaque disposition statique correspond à une plage de résolution d'écran. La modification de la résolution de l'écran peut changer différentes parties statiques (la position des éléments de la page change), mais dans chaque mise en page statique, les éléments de la page ne changent pas à mesure que la taille de la fenêtre est ajustée. La mise en page adaptative peut être considérée comme une série de mises en page statiques.

1. Fonctionnalités de mise en page : Lorsque la résolution de l'écran change, la position des éléments sur la page changera mais pas la taille.

2. Méthode de conception : utilisez @media media query pour changer de style pour des appareils de différentes tailles et supports. Avec une excellente conception de la plage de réponse, la meilleure expérience peut être donnée aux appareils situés dans la plage d'adaptation, et la disposition est en fait toujours fixée sur le même appareil.

Responsive Layout (Responsive Layout)

Avec l'émergence de la technologie de requête multimédia dans CSS3, le concept de design réactif a émergé. Le but du responsive design est de garantir qu'une page puisse afficher des résultats satisfaisants sur tous les terminaux (PC de différentes tailles, téléphones portables, montres, navigateurs web de réfrigérateurs, etc.). Pour les rédacteurs CSS, la mise en œuvre ne se limite pas à des techniques spécifiques, mais il s'agit généralement d'une combinaison de mise en page fluide et de mise en page flexible, et est utilisée avec la technologie de requête multimédia. ——Définissez respectivement des mises en page pour différentes résolutions d'écran, et en même temps, dans chaque mise en page, appliquez le concept de mise en page fluide, c'est-à-dire que la largeur des éléments de la page s'adapte automatiquement à mesure que la fenêtre est ajustée. Autrement dit : créez plusieurs mises en page fluides, chacune correspondant à une gamme de résolutions d’écran. La mise en page réactive peut être considérée comme une fusion de concepts de mise en page fluide et de conception de mise en page adaptative.

La réactivité est presque devenue la norme pour une excellente mise en page.

1. Fonctionnalités de mise en page : il y aura un style de mise en page sous chaque résolution d'écran, c'est-à-dire que la position et la taille des éléments changeront.

2. Méthode de conception : requête média + disposition du flux. Habituellement, @media media query et Grid System sont utilisés conjointement avec des unités de mise en page relatives pour la mise en page. En fait, il s'agit d'un nom collectif pour la technologie qui combine les technologies ci-dessus telles que la réactivité et la fluidité pour renvoyer différents styles sur une seule page Web. différents appareils via CSS.

• Avantages : Adapté aux PC et terminaux mobiles, si vous êtes assez patient, l'effet est parfait

• Inconvénients : (1) Requêtes des médias sont également limités. Ils peuvent être énumérés et ne peuvent s'adapter qu'à la largeur et à la hauteur du courant dominant. (2) Pour correspondre à suffisamment de tailles d'écran, la charge de travail n'est pas faible et la conception nécessite également plusieurs versions.

Les pages responsive ajouteront ce morceau de code dans l'en-tête :

<meta name="applicable-device" content="pc,mobile">
<meta http-equiv="Cache-Control" content="no-transform ">

Résumé :

Réactivité et Auto Le principe L'adaptation est similaire. Ils détectent tous les appareils. Différents CSS sont utilisés selon les appareils, et les CSS sont basés sur des pourcentages au lieu de largeurs fixes. La différence est que les modèles réactifs sont différents sur différents appareils. changera à mesure que l'appareil change, mais pas l'adaptatif. Tous les appareils ressembleront à un ensemble de modèles, mais la longueur ou les images deviendront plus petites. Différents modèles ne seront pas utilisés en fonction du style d'affichage, du style de flux. utilise certains paramètres, comment afficher lorsque la largeur est supérieure à une certaine quantité et comment afficher lorsqu'elle est inférieure à une certaine quantité, et la méthode d'affichage est la même que le débit d'eau, en chargeant partie par partie, tandis que le statique on utilise une largeur fixe.

La disposition de flux est utilisée pour résoudre le problème de compatibilité entre des appareils similaires avec des résolutions différentes (il y a généralement moins de différences dans les résolutions) ; la disposition réactive est utilisée pour résoudre le problème de compatibilité entre différents appareils avec des résolutions différentes) ; à la grande différence de résolution entre les PC, tablettes, téléphones portables et autres appareils).

Comment mettre en œuvre une mise en page réactive : ajoutez une conception de mise en page réactive et la mise en page réactive des pages Web a émergé

Mise en page flexible (mise en page rem/em)

Référence : Quelle est la différence entre une mise en page fluide et une conception Web réactive ?

1. La différence entre rem et em : rem et em sont tous deux produits en réponse à l'affichage de différentes tailles de police de page Web. Parmi eux, em est relatif à son élément parent, ce qui causera beaucoup de désagréments dans les applications pratiques ; et rem est toujours relatif à la taille du html, qui est l'élément racine de la page.

2. Utilisez les unités em ou rem pour la mise en page relative, qui est plus flexible par rapport au pourcentage. En même temps, elle peut prendre en charge l'affichage normal de l'ajustement et de la mise à l'échelle de la taille de la police du navigateur. élément parent, il n’est pas obtenu de promotion. [Lorsque les sites Web chinois créent des pages Web, ils sont habitués à utiliser CSS pour définir avec force la taille de la police afin de garantir que tout le monde voit le même effet. La plupart des sites, y compris des portails tels que NetEase et Sohu, utilisent l'unité absolue px (pixel). Cependant, si l’on considère la convivialité du site Web, la taille de la police doit être variable. Certaines personnes malvoyantes doivent agrandir la police pour voir clairement le contenu de la page. Cependant, IE, qui occupe la majeure partie du marché des navigateurs, ne peut pas ajuster la taille de la police qui utilise px comme unité. Les étrangers attachent une grande importance à la facilité d’utilisation des sites Web et un nombre considérable de sites Web étrangers les utilisent déjà comme unité de police. 】

3. La caractéristique de ce type de mise en page est que la taille de chaque élément qui enveloppe le texte est en unités em/rem, tandis que la taille des principales zones divisées de la page est toujours en pourcentage ou Unités px (identiques à la mise en page « style de flux » ou « mise en page statique/fixe »). Les premiers navigateurs ne prennent pas en charge la mise à l'échelle proportionnelle de la page entière, mais prennent uniquement en charge l'agrandissement de la taille du texte dans la page Web, dans ce cas. L'utilisation de em/rem comme unité permet à l'élément enveloppant le texte d'évoluer à mesure que le texte évolue.

4、浏览器的默认字体高度一般为16px，即1em:16px，但是 1:16 的比例不方便计算，为了使单位em/rem更直观，CSS编写者常常将页面跟节点字体设为62.5%，比如选择用rem控制字体时，先需要设置根节点html的字体大小，因为浏览器默认字体大小16px*62.5%=10px。这样1rem便是10px，方便了计算。

Set body font-size to 62.5% for Easier em Conversion:

If you would like to use relative units (em) for your font sizes, declaring 62.5% for the font-size property of the body will make it easier to convert px to em. By doing it this way, converting to em is a matter of dividing the px value by 10 (e.g. 24px = 2.4em).

那么为什么一般多是 html{font-size:62.5%;} 而不是 html{font-size:10px;}呢？

因为有些浏览器默认的不是16px，或者用户修改了浏览器默认的字体大小（因浏览器分辨率大小，视力，习惯等因素）。如果我们将其设置为10px，一定会影响在这些浏览器上的效果，所以最好用绝大多数用户默认的16作为基数 * 62.5% 得到我们需要的10px。

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

实际项目设置成 font-size: 62.5%可能会出现问题，因为chrome不支持小于12px的字体，计算小于12px的时候，会默认取12px去计算，导致chrome的em/rem计算不准确。

针对这个现象，可以尝试设置html字体为100px，body 修正为16px，这样 0.1rem 就是 10px，而body的字体仍然是默认大小，不影响未设置大小的元素的默认字体的大小。

5、用em/rem定义尺寸的另一个好处是更能适应缩进/以字体单位padding或margin／浏览器设置字体尺寸等情况（因为em/rem相对于字体大小，会同步改变）。例如：p{ text-indent: 2em; }

6、使用rem单位的弹性布局在移动端也很受欢迎。

工具ViewtoREM：PX转换到REM（自动预处理）

rem的定义：font size of the root element，rem是相对于根元素来设置字体大小的，这就意味着，我们只需要根据自己的需求在根元素确定一个参考值。

rem与em、px的区别：

• px：像素，比较精确的单位，但不好做响应式布局

• em：以父节点font-size大小为参考点，标准不统一，容易造成混乱

• REM支持的浏览器：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。IE6-8无法支持。

对于不同尺寸的屏幕，可以统一假设屏幕宽度为640px后编写CSS（当然你也可以假定统一为320px）。此时，我们设定html元素的font-size为40px（同样，只是举例），然后各处（元素尺寸、文字大小）使用rem作为单位，随后搭配媒体查询或JS，根据屏幕的大小来动态控制html元素的font-size（特定屏幕尺寸下，html元素的font-size应当设置为何值，是使用这个方案时设计师和程序员需要反复考虑后确定的，以下试举一段相关的CSS媒体查询代码），即可自动改变所有用rem定义尺寸的元素的大小（且CSS编写者在脑中进行换算的计算过程比em简单得多）。

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}

其实在移动端使用所谓的弹性布局，是比较勉强的。移动端弹性布局流行起来的原因归根结底是rem单位对于（根据屏幕尺寸）调整页面的各元素的尺寸、文字大小时比较好用。其实，使用vw、vh等后起之秀的单位，可以实现完美的流式布局（高度和文字大小都可以变得“流式”），弹性布局就不再必要了。详细可参考：视区相关单位vw, vh…简介以及可实际应用场景

以下优缺点参考：响应式设计和REM布局的对比（有疑问）

• 优点：理想状态是所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应。

• 缺点：这种rem+js只不过是宽度自适应，高度没有做到自适应，一些对高度，或者元素间距要求比较高的设计，则这种布局没有太大的意义。如果只是宽度自适应，更推荐响应式设计。

响应式和弹性布局之间的对比：

响应式布局：改变浏览器宽度，“布局”会随之变化，不是一成不变的，例如导航栏在大屏幕下是横排，在小屏幕下是竖排，在超小屏幕下隐藏为菜单，也就是说如果有足够的耐心，在每一种屏幕下都应该有合理的布局，完美的效果。

rem布局：改变浏览器宽度，页面所有元素的高宽都等比例缩放，也就是大屏幕下导航是横的，小屏幕下还是横的只不过变小了。

结论：

1.如果只做pc端，那么静态布局（定宽度）是最好的选择；

2. Si vous travaillez sur un terminal mobile et que la conception n'a pas d'exigences élevées en matière de hauteur et d'espacement des éléments, alors une mise en page flexible (rem+js) est le meilleur choix. Ajustez simplement la taille de la police avec une partie de. css et une partie de js ;

3. Si la compatibilité PC et mobile est requise et que les exigences sont très élevées, alors la mise en page réactive est toujours le meilleur choix. différentes hauteurs et largeurs, et la mise en page réactive crée différentes mises en page en fonction des requêtes multimédias.

Pour plus de connaissances sur la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!