How to create a responsive website using only 1 css property?

青灯夜游
Release: 2020-11-18 17:40:51
forward
1634 people have browsed it

How to create a responsive website using only 1 css property?

Use a CSS property to create a responsive website. The following article will introduce to you how it is done. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone. [Related recommendations: CSS Video Tutorial]

Take this template as an example, no css attributes are applied.

How to create a responsive website using only 1 css property?

Using the clamp() CSS function, we can create a responsive website with only one attribute.

Now add magic CSS

clamp(minimum, preferred, maximum);
Copy after login

Here it is! You're done

How to create a responsive website using only 1 css property?

Instructions

clamp() works by "clamping" or limiting a flexible value, Make it between the minimum and maximum range.

The usage method is as follows:

  1. minimum minimum value: for example 16px
  2. flexible elastic value: for example 5vw
  3. maximum Maximum value: for example 34px
h1 {
  font-size: clamp(16px, 5vw, 34px);
}
Copy after login

In this example, only if the value is greater than 16px and less than 34px , the h1 font size value will be 5% of the viewport width.

For example, if your viewport width is 300px, your 5vw value will be equal to 15px, however, you will change that font size The value is limited to a minimum of 16px, so that's what will happen.

On the other hand, if your viewport width is 1400px, then 5vw will be as high as 70px! But luckily you're limiting that maximum to 34px, so it won't exceed that.

How to create a responsive website using only 1 css property?

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

I can add this code to this template...

img {
  width: clamp(15vw, 800%, 100%);
}
h1 {
  font-size: clamp(20px, 5vw, 35px);
}
p {
  font-size: clamp(10px, 4vw, 20px);
}
Copy after login

And literally accepts any other property of length, frequency, angle, time, percentage, number, or integer.

How to create a responsive website using only 1 css property?

Original text: https://dev.to/dip15739
Author: Dip Vachhani

More programming related knowledge , please visit: programming video! !

The above is the detailed content of How to create a responsive website using only 1 css property?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:segmentfault.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template