Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie erstelle ich eine responsive Website mit nur einer CSS-Eigenschaft?

青灯夜游
Freigeben: 2020-11-18 17:40:51
nach vorne
1620 Leute haben es durchsucht

Wie erstelle ich eine responsive Website mit nur einer CSS-Eigenschaft?

Verwenden Sie eine CSS-Eigenschaft, um eine responsive Website zu erstellen. Der folgende Artikel zeigt Ihnen, wie das geht. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein. [Verwandte Empfehlungen: CSS-Video-Tutorial]

Am Beispiel dieser Vorlage werden keine CSS-Attribute angewendet.

Wie erstelle ich eine responsive Website mit nur einer CSS-Eigenschaft?

Mit der CSS-Funktion clamp() können wir eine responsive Website mit nur einem Attribut erstellen. clamp() CSS函数,我们可以创建仅具有一个属性的响应式网站。

现在添加魔术CSS

clamp(minimum, preferred, maximum);
Nach dem Login kopieren

在这里!你已经完成了

Wie erstelle ich eine responsive Website mit nur einer CSS-Eigenschaft?

说明

clamp() 的工作原理是“夹紧”或限制一个灵活的值,使其处于最小和最大范围之间。

使用方法如下:

  1. minimum 最小值:例如 16px
  2. flexible 弹性值:例如 5vw
  3. maximum 最大值:例如 34px
h1 {
  font-size: clamp(16px, 5vw, 34px);
}
Nach dem Login kopieren

在此示例中,仅当该值大于 16px 且小于 34px 时,h1 字体大小值将为视口宽度的 5%

例如,如果你的视口宽度是 300px,你的 5vw 值将等于 15px,但是,你将该字体大小值限制为最小 16px,因此这就是将要发生的情况。

另一方面,如果你的视口宽度为 1400px,则 5vw 将高达 70px!但幸运的是,你将该最大值限制为 34px

Fügen Sie jetzt hier magisches CSS

img {
  width: clamp(15vw, 800%, 100%);
}
h1 {
  font-size: clamp(20px, 5vw, 35px);
}
p {
  font-size: clamp(10px, 4vw, 20px);
}
Nach dem Login kopieren
Wie erstelle ich eine responsive Website mit nur einer CSS-Eigenschaft? hinzu! Fertig

Wie erstelle ich eine responsive Website mit nur einer CSS-Eigenschaft?

Erläuterung

clamp() funktioniert durch „Klemmen“ oder Begrenzen eines flexiblen Werts, der zwischen einem minimalen und maximalen Bereich liegt.

Die Verwendungsmethode ist wie folgt:

  1. minimaler Mindestwert: zum Beispiel 16px
  2. flexibler elastischer Wert: zum Beispiel 5vw
  3. maximum Maximalwert: zum Beispiel 34px
rrreee

In diesem Beispiel nur, wenn der Wert größer als 16pxist > und weniger als 34px beträgt der Wert für die Schriftgröße h1 5 % der Breite des Ansichtsfensters. Wie erstelle ich eine responsive Website mit nur einer CSS-Eigenschaft?

Wenn Ihre Ansichtsfensterbreite beispielsweise 300px beträgt, entspricht Ihr Wert für 5vw 15px, allerdings ändern Sie diese Schriftgröße value Das Limit liegt bei mindestens 16px, das wird also passieren.

Wenn Ihre Ansichtsfensterbreite andererseits 1400px beträgt, dann beträgt 5vw bis zu 70px! Aber zum Glück begrenzen Sie das Maximum auf 34px, sodass es nicht darüber hinausgeht.

Online-Demo: https://dip15739.github.io/ResponsiveWebsite-CSSproperty/

Ich kann diesen Code zu dieser Vorlage hinzufügen ... 🎜rrreee🎜Und buchstäblich jede andere Länge, Frequenz, Winkel und Zeit akzeptieren , Prozent-, Zahlen- oder Ganzzahleigenschaften. 🎜🎜🎜🎜🎜🎜Originaltext: https://dev.to/dip15739🎜Autor: Dip Vachhani🎜🎜🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine responsive Website mit nur einer CSS-Eigenschaft?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:segmentfault.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!