CSS-Layout, statisches Layout, adaptives Layout, flüssiges Layout, responsives Layout, flexibles Layout

(Empfohlenes Tutorial: CSS-Video-Tutorial)

Statisches Layout (Statisches Layout)

ist traditionelles Webdesign und die Größe aller Elemente auf der Webseite verwendet px als Einheit.

1. Layouteigenschaften: Unabhängig von der Browsergröße wird das Layout der Webseite immer entsprechend dem Layout angezeigt, als der Code ursprünglich geschrieben wurde. Herkömmliche PC-Websites haben alle ein statisches Layout (feste Breite), d. h. die Mindestbreite ist festgelegt. Wenn die Breite kleiner als diese Breite ist, wird eine Bildlaufleiste angezeigt wird zentriert und der Hintergrund wird hinzugefügt. Diese Art von Design ist auf der PC-Seite üblich.

2. Entwurfsmethode:

• PC: Zentriertes Layout, absolute Breite/Höhe (px) für alle Stile verwenden, Layout entwerfen, horizontale und vertikale Bildlaufleisten verwenden, um den Inhalt anzuzeigen, wenn die Bildschirmbreite und -höhe angepasst wird . Decken Sie den Teil ab;

• Mobile Geräte: Erstellen Sie zusätzlich eine mobile Website, entwerfen Sie ein separates Layout und verwenden Sie unterschiedliche Domainnamen wie wap oder m.

Zwei Möglichkeiten, statisches Layout in der mobilen Entwicklung zu verwenden: (Aus: Was ist der Unterschied zwischen Flow-Layout und responsivem Webdesign?)

(1) Legen Sie width=320 im Viewport-Meta-Tag fest, jede Seite wird auch von Elementen verwendet px als Einheit. Durch die Verwendung von JS zur dynamischen Änderung der Anfangsskalierung des Etiketts wird die Seite proportional skaliert, sodass sie gerade den gesamten Bildschirm ausfüllt. (Siehe Front-End-Entwicklung – Web-App-Änderung rem)

(2) Legen Sie den Inhalt „width=640, user-scalable=no“ im Viewport-Meta-Tag fest, und jedes Element der Seite verwendet seitdem auch px als Einheit 640 Pixel überschreiten die Grenze der Mobiltelefonbreite. Der Browser verkleinert die Seite automatisch auf Vollbild (Einzelheiten finden Sie im Inhalt „width=640, user-scalable=no“) und führt dann ein Pixeldesign mit fester Größe durch? - Frontend Entwicklung)

• Vorteile: Diese Layoutmethode ist für Designer und CSS-Autoren am einfachsten und es gibt keine Kompatibilitätsprobleme.

• Nachteile: Offensichtlich kann die Leistung je nach Bildschirmgröße des Benutzers nicht unterschiedlich sein Derzeit verwenden die meisten Portal-Websites und die meisten Firmen-PC-Werbeseiten diese Layoutmethode für Webseiten mit fester Pixelgröße. Diese Methode ist jedoch nicht vollständig mit zukünftigen Webproduktionsmethoden kompatibel. Zur Anpassung an unbekannte Geräte sind einige Methoden erforderlich. Das Merkmal von Liquid Layout (auch „Fluid“ genannt) ist, dass sich die Breite der Seitenelemente an die Bildschirmauflösung anpasst Das Gesamtlayout bleibt unverändert. Repräsentativ für das Zaunsystem (Rastersystem).

Verwenden Sie Prozentsätze für die Hauptunterteilungsbereiche der Webseite (verwendet mit Min-*-, Max-*-Attributen), legen Sie beispielsweise die Breite des Netzes fest Seitenkörper auf 80 %, die Mindestbreite beträgt 960 Pixel (Breite: 100 %, die Höchstbreite wird im Allgemeinen auf die Größe des Bildes selbst eingestellt, um zu verhindern, dass es gestreckt und verzerrt wird)

1. Layoutfunktionen: Bildschirmauflösung. Bei einer Änderung ändert sich die Größe der Elemente auf der Seite, aber das Layout ändert sich nicht [Dies führt dazu, dass die Elemente nicht richtig angezeigt werden können, wenn der Bildschirm zu groß oder zu klein ist]

2 .Entwurfsmethode: Definieren Sie die Breite und Höhe mit px, die entsprechend der Echtzeitgröße des Ansichtsfensters und des übergeordneten Elements angepasst werden können. Dies ist häufig der Fall wird mit Attributen wie max-width/min-width verwendet, um den Größenflussbereich zu steuern, um zu vermeiden, dass er zu groß oder zu klein ist, um das Lesen zu beeinträchtigen. Diese Layoutmethode wurde in der frühen Geschichte verwendet, um mit PC-Bildschirmen unterschiedlicher Größe umzugehen der Web-Front-End-Entwicklung (der Unterschied in der Bildschirmgröße war zu dieser Zeit nicht allzu groß) und wird auch häufig in der heutigen mobilen Entwicklungsmethode verwendet, aber die Mängel liegen auf der Hand: Das Hauptproblem besteht darin, dass die Bildschirmgröße übersteigt zu groß ist, wird es auf einem Bildschirm, der im Vergleich zu seinem ursprünglichen Design zu klein oder zu groß ist, nicht richtig angezeigt, da die Breite mit % definiert wird, die Höhe und die Textgröße jedoch größtenteils mit px festgelegt sind. Der Anzeigeeffekt auf einem Mobiltelefon mit großem Bildschirm besteht also darin, dass die Breite einiger Seitenelemente sehr lang ist, die Höhe und die Textgröße jedoch immer noch dieselben sind (das heißt, diese Dinge können nicht „fließend“ werden). ), ist die Anzeige sehr inkonsistent.

Adaptives Layout (Adaptives Layout)

Das Merkmal des adaptiven Layouts besteht darin, Layouts für unterschiedliche Bildschirmauflösungen zu definieren, dh mehrere statische Layouts zu erstellen, wobei jedes statische Layout einem Bildschirmauflösungsbereich entspricht. Durch Ändern der Bildschirmauflösung können verschiedene statische Teile gewechselt werden (die Position der Seitenelemente ändert sich), aber in jedem statischen Layout ändern sich die Seitenelemente nicht, wenn die Fenstergröße angepasst wird. Adaptives Layout kann als eine Reihe statischer Layouts betrachtet werden.

1. Layoutfunktionen: Wenn sich die Bildschirmauflösung ändert, ändert sich die Position der Elemente auf der Seite, aber die Größe ändert sich nicht.

2. Designmethode: Verwenden Sie die @media-Medienabfrage, um verschiedene Stile für Geräte unterschiedlicher Größe und Medien zu wechseln. Mit einem hervorragenden Reaktionsbereichsdesign kann den Geräten innerhalb des Anpassungsbereichs die beste Erfahrung geboten werden, und das Layout ist tatsächlich immer noch auf demselben Gerät festgelegt.

Responsives Layout

Mit dem Aufkommen der Medienabfragetechnologie in CSS3 ist das Konzept des responsiven Designs entstanden. Das Ziel des responsiven Designs besteht darin, sicherzustellen, dass eine Seite auf allen Endgeräten (PCs unterschiedlicher Größe, Mobiltelefone, Uhren, Kühlschrank-Webbrowser usw.) zufriedenstellende Ergebnisse anzeigen kann. Für CSS-Autoren ist die Implementierung nicht auf bestimmte Techniken beschränkt. Normalerweise kombiniert es jedoch ein flüssiges Layout und ein flexibles Layout und verwendet dann die Medienabfragetechnologie. ——Definieren Sie Layouts für jeweils unterschiedliche Bildschirmauflösungen und wenden Sie gleichzeitig in jedem Layout das Konzept des Fluid-Layouts an, d. h. die Breite der Seitenelemente passt sich automatisch an, wenn das Fenster angepasst wird. Das heißt: Erstellen Sie mehrere flüssige Layouts, die jeweils einer Reihe von Bildschirmauflösungen entsprechen. Responsive Layout kann als eine Verschmelzung von Fluid-Layout- und adaptiven Layout-Designkonzepten angesehen werden.

Reaktionsfähigkeit ist fast zum Standard für ein hervorragendes Seitenlayout geworden.

1. Layoutfunktionen: Für jede Bildschirmauflösung gibt es einen Layoutstil, d. h. die Position und Größe der Elemente ändert sich.

2. Entwurfsmethode: Medienabfrage + Flusslayout. Normalerweise werden @media media query und Grid System in Verbindung mit relativen Layouteinheiten für das Layout verwendet. Tatsächlich handelt es sich um einen Sammelnamen für die Technologie, die die oben genannten Technologien wie Reaktionsfähigkeit und Fluidität kombiniert, um verschiedene Stile auf einer einzelnen Webseite zurückzugeben verschiedene Geräte über CSS.

• Vorteile: Angepasst an PC und mobile Endgeräte, wenn Sie geduldig genug sind, ist der Effekt perfekt

• Nachteile: (1) Medienabfragen sind begrenzt, das heißt, sie können aufgezählt und nur angepasst werden Mainstream-Breite und -Höhe. (2) Um genügend Bildschirmgrößen zu erreichen, ist der Arbeitsaufwand nicht gering und das Design erfordert auch mehrere Versionen.

Responsive Seiten fügen diesen Code in der Kopfzeile hinzu:

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

Zusammenfassung:

Sie erkennen beide Geräte und verwenden je nach Gerät unterschiedliche CSS Der Unterschied besteht darin, dass responsive Vorlagen auf verschiedenen Geräten unterschiedlich aussehen und den Anzeigestil ändern, wenn sich das Gerät ändert. Ja, alle Geräte sehen wie eine Reihe von Vorlagen aus, aber die Länge bzw Bilder sind kleiner geworden. Je nach Gerät werden keine unterschiedlichen Anzeigestile verwendet Dasselbe gilt für den Wasserfluss, der Teil für Teil geladen wird, und der statische verwendet eine feste Breite.

Fließendes Layout wird verwendet, um die Kompatibilität zwischen ähnlichen Geräten mit unterschiedlichen Auflösungen zu lösen (im Allgemeinen gibt es weniger Unterschiede in den Auflösungen); reaktionsfähiges Layout wird verwendet, um das Kompatibilitätsproblem zwischen verschiedenen Geräten mit unterschiedlichen Auflösungen zu lösen (bezieht sich im Allgemeinen auf große Auflösungsunterschiede zwischen PCs). , Tablets, Mobiltelefone und andere Geräte).

So implementieren Sie ein responsives Layout: Geben Sie ein responsives Layout-Design ein, und schon entsteht das responsive Layout von Webseiten.

Flexibles Layout (rem/em-Layout)

Referenz: Was ist der Unterschied zwischen Flow-Layout und responsivem Web? Design? ?

1. Der Unterschied zwischen rem und em: rem und em werden erstellt, um sich an die Anzeige unterschiedlicher Webseiten-Schriftgrößen anzupassen. Unter ihnen ist em relativ zu seinem übergeordneten Element, was in praktischen Anwendungen viele Unannehmlichkeiten verursachen wird, und rem ist immer relativ zur Größe von HTML, dem Stammelement der Seite.

2. Verwenden Sie em- oder rem-Einheiten für das relative Layout, was im Vergleich zu % flexibler ist und die normale Anzeige der Browser-Schriftgrößenanpassung und -skalierung unterstützen kann. Da em ein relatives übergeordnetes Element ist, wurde es nicht gefördert. [Wenn chinesische Websites Webseiten erstellen, sind sie es gewohnt, die Schriftgröße zwangsweise zu definieren, um sicherzustellen, dass jeder den gleichen Effekt sieht. Die meisten Websites, einschließlich Portalen wie NetEase und Sohu, verwenden die absolute Einheit px (Pixel). Wenn wir jedoch die Benutzerfreundlichkeit der Website berücksichtigen, sollte die Schriftgröße variabel sein. Manche Menschen mit Sehschwäche müssen die Schriftart vergrößern, um den Seiteninhalt deutlich zu sehen. Allerdings kann IE, der den größten Teil des Browsermarktes einnimmt, die Schriftgröße nicht anpassen, wenn px als Einheit verwendet wird. Ausländische Menschen legen großen Wert auf die Benutzerfreundlichkeit von Websites, und eine beträchtliche Anzahl ausländischer Websites hat sie bereits als Schriftarteinheit verwendet. 】

3. Das Merkmal dieser Art von Layout ist, dass die Größe jedes Elements, das den Text umschließt, in em/rem-Einheiten angegeben wird, während die Größe der unterteilten Hauptbereiche der Seite immer noch in Prozent- oder px-Einheiten angegeben wird (dasselbe als „Fluid Layout“ oder „Static/Fixed Layout“). Frühe Browser unterstützen keine proportionale Skalierung der gesamten Seite, sondern in diesem Fall nur die Vergrößerung der Textgröße innerhalb der Webseite. Durch die Verwendung von em/rem als Einheit kann das den Text umschließende Element entsprechend der Textskalierung skaliert werden.

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. Wenn Sie an einem mobilen Endgerät arbeiten und das Design keine hohen Anforderungen an Höhe und Elementabstand stellt, ist das flexible Layout (rem+js) die beste Wahl. Passen Sie einfach die Schriftgröße mit einem Teil von CSS an ein Teil von js;

3. Wenn PC und Mobilgerät kompatibel sein müssen und die Anforderungen sehr hoch sind, ist ein responsives Layout immer noch die beste Wahl. Die Voraussetzung ist, dass das Design unterschiedliche Designs basierend auf unterschiedlichen Höhen und Breiten erstellt Der reaktionsfähige Stil erstellt unterschiedliche Layouts basierend auf Medienabfragen.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonCSS-Layout, statisches Layout, adaptives Layout, flüssiges Layout, responsives Layout, flexibles Layout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!