Es gibt verschiedene Methoden für ein responsives Layout

Einige Methoden des responsiven Layouts umfassen: 1. Medienabfrage; 3. vw oder vh, vh repräsentiert die Höhe relativ zum Ansichtsfenster; rem-Einheit sind HTML-Elemente im Verhältnis zur Schriftgröße; 5. Flex-elastisches Layout. Die Betriebsumgebung dieses Artikels: Acer S40-51, Windows 10 Home, chinesische Version ive-Layout Methode eins: Medienabfrage

Mit @media können verschiedene Stile für verschiedene Medientypen definiert werden, insbesondere für reaktionsfähige Seiten, um einen Anpassungseffekt zu erzielen . Zum Beispiel:

Durch Medienabfragen kann ein responsives Layout erreicht werden, indem unterschiedliche Stile für Geräte mit unterschiedlichen Auflösungen geschrieben werden. Beispielsweise können wir unterschiedliche Hintergrundbilder für Bildschirme mit unterschiedlichen Auflösungen festlegen. Beispielsweise kann das Festlegen von @2x-Bildern für Mobiltelefone mit kleinem Bildschirm und @3x-Bildern für Mobiltelefone mit großem Bildschirm problemlos durch Medienabfragen erreicht werden.

Aber die Nachteile von Medienabfragen liegen auch auf der Hand. Wenn bei einer Änderung der Browsergröße zu viele Stile geändert werden müssen, sind mehrere Sätze von Stilcodes sehr umständlich.

Responsive Layout-Methode 2: Prozent %

Wenn sich beispielsweise die Breite oder Höhe des Browsers ändert, kann die prozentuale Einheit verwendet werden, um die Breite und Höhe der Komponenten im Browser mit dem Browser zu ändern Änderungen, um einen responsiven Effekt zu erzielen.

Der Prozentsatz der Höhen- und Breitenattribute hängt von der Breite und Höhe des übergeordneten Tags ab. Anders verhält es sich jedoch mit Innenabstand, Rand, Rand und anderen Attributen

Wenn der Innenabstand eines untergeordneten Elements als Prozentsatz festgelegt wird, egal ob in vertikaler oder horizontaler Richtung, ist er relativ zur Breite des direkten übergeordneten Elements Element und unterscheidet sich von der Höhe des übergeordneten Elements. Nichts zu tun.

@media媒体查询可以针对不同的媒体类型定义不同的样式，特别是响应式页面，可以针对不同屏幕的大小，编写多套样式，从而达到自适应的效果。举例来说：

通过媒体查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，比如我们为不同分辨率的屏幕，设置不同的背景图片。比如给小屏幕手机设置@2x图，为大屏幕手机设置@3x图，通过媒体查询就能很方便的实现。

但是媒体查询的缺点也很明显，如果在浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。

响应式布局方法二：百分比%

比如当浏览器的宽度或者高度发生变化时，通过百分比单位，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。

height,width属性的百分比依托于父标签的宽高。但是，padding、border、margin等属性的情况又不一样

• 子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。

• 子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width

• border-radiusWenn der Rand eines untergeordneten Elements auf einen Prozentsatz eingestellt ist, unabhängig davon, ob er vertikal oder horizontal ist, ist er relativ zur Breite des direkten übergeordneten Elements.

border-radius ist anders. Wenn der Randradius ein Prozentsatz ist, der sich auf seine eigene Breite bezieht

Nachteile

Wenn wir die Breite und Höhe eines Elements gemäß dem Entwurfsentwurf definieren möchten, es muss in Prozenteinheiten umgerechnet werden.

Wenn Sie in jedem Attribut Prozentsätze verwenden, sind die Attribute relativ zum übergeordneten Element nicht eindeutig. Beispielsweise beziehen sich Breite und Höhe auf die Breite und Höhe des übergeordneten Elements, während sich Rand und Abstand auf die Breite des übergeordneten Elements beziehen, egal ob vertikal oder horizontal, der Randradius bezieht sich auf das Element selbst usw. Dadurch ist es für uns einfacher, Prozenteinheiten zu verwenden, um das Layout zu vereinfachen. Das Problem wird komplizierter. Es wird daher nicht empfohlen, % für ein responsives Layout zu verwenden.

Responsive Layout-Methode drei: vw/vh

CSS3 führt eine neue Einheit vw/vh ein, die sich auf das Ansichtsfenster bezieht und vh die Höhe relativ zum Ansichtsfenster darstellt Fenster. Für jedes hierarchische Element entspricht 1vw bei Verwendung von vw-Einheiten einem Prozent der Ansichtsbreite. Sehr ähnlich dem Prozentlayout, aber besser.

Responsive Layout-Methode vier: rem

rem-Einheit ist das HTML-Element relativ zur Schriftgröße, auch Wurzelelement genannt. Standardmäßig beträgt die Schriftgröße von HTML-Elementen 16 Pixel. Zu diesem Zeitpunkt ist also 1rem = 16px.

Optimierte Version

//动态为根元素设置字体大小
function init () {
 // 获取屏幕宽度
 var width = document.documentElement.clientWidth
 // 设置根元素字体大小。此时为宽的10等分
 document.documentElement.style.fontSize = width / 10 + 'px'
}
//首次加载应用，设置一次
init()
// 监听手机旋转的事件的时机，重新设置
window.addEventListener('orientationchange', init)
// 监听手机窗口变化，重新设置
window.addEventListener('resize', init)

Verstehen: Unabhängig davon, wie sich das sichtbare Fenster des Geräts ändert, wird rem immer auf 1/10 der Breite eingestellt. Das heißt, das prozentuale Layout wird erreicht. Es ist nicht so starr wie die erste Version der Medienabfrage. Der obige Code muss vor dem Dom geschrieben werden (kann im ersten Skript-Tag im Kopf platziert werden).

Responsive Layout-Methode fünf: Flex-elastisches Layout

Flexibles Layout ist eine sehr praktische Methode, die nur verwendet werden muss Verlassen Sie sich auf Die CSS-Stilmethode zum Implementieren eines responsiven Layouts ist auch die am häufigsten verwendete Methode zum Implementieren eines responsiven Layouts.

Insbesondere für E-Commerce-Websites oder mobile App-Seiten wie Taobao und Taobao kann es durch flexibles Layout einfach implementiert werden.

• Flexibles Layout verfügt über entsprechende Attribute für die übergeordneten und untergeordneten Elemente, um die „Elastizität“ der untergeordneten Elemente im übergeordneten Element zu regulieren.

• Auf dem übergeordneten Element umfassen die Attribute im Zusammenhang mit dem flexiblen Layout, die wir häufig verwenden, hauptsächlich Flex-Direction, Flex-Wrap, Justify-Content, Align-Items und Align-Content. Diese Attribute stammen jeweils von der Hauptachse . Die Richtung, ob umgebrochen werden soll, die Ausrichtung des Elements auf der Hauptachse, die Ausrichtung des Elements auf der Querachse und die Ausrichtung des Elements auf mehreren Achsen regeln die Flexibilität des Elements im übergeordneten Element.

  🎜🎜🎜Bei Unterelementen umfassen die Eigenschaften im Zusammenhang mit dem flexiblen Layout, die wir häufig verwenden, hauptsächlich Reihenfolge, Flex-Grow, Flex-Shrink, Flex-Basis und Align-Selbst. Diese Eigenschaften reichen von der Sortierung von Elementen Das Projektvergrößerungsverhältnis, das Projektverkleinerungsverhältnis, der vom Projekt eingenommene Hauptachsenraum und die Ausrichtung eines einzelnen Projekts auf der Querachse regulieren die Flexibilität des Projekts selbst. 🎜

Wenn Sie mehr über das Erlernen des Programmierens erfahren möchten, achten Sie bitte auf die Spalte „PHP-Schulung“!

Das obige ist der detaillierte Inhalt vonEs gibt verschiedene Methoden für ein responsives Layout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!