Shulou(Shulou.com)06/01 Report--

This article "based on vw responsive typesetting and layout how to achieve" most people do not understand, so the editor summarized the following content, detailed, clear steps, with a certain reference value, I hope you can get something after reading this article, let's take a look at this "based on vw responsive typesetting and layout how to achieve" article.

1. What is the relative unit of the visual area?

This is the unit relative to the browser viewport size, including the following 4:

Vw-percentage of the width of the visual area

Vh-percentile height of visual area

Vmin-vw or vh, take the smaller one

Vmax-vw or vh, the larger one

As for the more specific content, I will not expand, because I found that there is already a very powerful person to these units as a very detailed introduction, is super-detailed, this person is super able to write. And as soon as I looked at the release date, September 2012, I was surprised that it had been four years since the last London Olympic Games, and it was too cutting-edge. At that time, browser compatibility only looked like this:

Four years later, things have changed, and the grass on vw's head is getting greener and greener. Now the compatibility is:

Indeed, a lot of green, Android 4.4 began to support, some time ago bought for Dad Huawei is the default version of 5.*, it seems that vw in the mobile spring is coming, ha ~

There is another unit in CSS3, rem. It is estimated that many friends have heard of it or used it. Why is rem more popular than vw? because rem has been supported since Android 2.1 and has good compatibility. Once compatibility is not a problem, vw will become popular, just like Xue Zhiqian.

Second, responsive typesetting and layout based on vw

In general, the larger the screen, the larger the text size, and the size of the elements can be scaled up, especially in the current web design style.

If you want to achieve this elastic adaptive effect, the current mainstream implementation is to set the font-size size of the root element, and the specific element or module is achieved in rem or em units.

One is to directly set a critical point font size, such as:

Html {font-size: 16px;} @ media screen and (min-width: 600px) {html {font-size: 18px;}} @ media screen and (min-width: 1000px) {html {font-size: 22px;}}

Another way is to use JS to dynamically change the font-size size of root when the resize or the screen is rotated.

The problem with the previous @ media-based CSS implementation is that the elastic adaptation of content is only at the critical point, when the "Duang" changes, so when our browser size is stretched, we will feel the effect of "thump", which is like a half-step madness with a smile:

The problem with using JS is that it is JS. To ensure the loading experience, the head needs to be inline, and in order to ensure real-time performance, multiple browsers need to monitor change events. My mantra is to "appear verbose".

Is there a way to have the best of both worlds?

Yes, that is, this article will solemnly invite the vw to cooperate with CSS3 calc calculation to achieve dynamic font size effect.

For example, if we want the font-size size of the html root element to change between 18px~22px when the browser width changes with 600px~1000px, we can:

Html {font-size: calc (18px + 4 * (100vw-600px) / 400);}

When the width of the viewport is 600px, 100vw equals 600px, so:

18px + 4 * (100vw-600px) / 400 ↓ 18px + 4 * (600px-600px) / 400 ↓ 18px

When the width of the viewport is 1000px, 100vw equals 1000px, so:

18px + 4 * (100vw-600px) / 400 ↓ 18px + 4 * (1000px-600px) / 400 ↓ 18px + 4px ↓ 22px

So, in theory, a layout basis for dynamic matching of 18px~22px font sizes is established.

Generally speaking, the appearance of the word "theoretically" means that I am going to "release the pit". Get out of the way.

This "pit" means that the Safari browser of Apple system does not recognize the above attribute values (screenshot below):

Not Safari, all browsers under window, including IE, and Chrome under mac, can be parsed correctly.

The previous article of this article, "Research on z-index level rendering anomalies of Safari 3D transform Transformation", complained that "Safari is the IE6 of the new era". Unexpectedly, the reputation of this "new era IE6" is getting stronger and stronger.

Fortunately, we still have a way to save the country. That is, our basic font size does not use pixel units, but percentage units, as follows:

Html {font-size: calc (112.5% + 4 * (100vw-600px) / 400);}

This browser, including Safari, can calculate the font-size size as we expected, so after a lot of toss, we have the following responsive settings:

The 375px size of html {/ * iPhone6 is used as the 16px benchmark, and the 600px is exactly the 18px size * / font-size: calc (min-width: 600px) {html {/ * 600px-1000px adds 1px (18px-22px) * / font-size: calc (112.5% + 4 * (100vw-600px) / 400) } @ media screen and (min-width: 1000px) {html {/ * 1000px increases every 100 pixels of 0.5px * / font-size: calc (137.5% + 5 * (100vw-1000px) / 1000);}}

With a dynamic root font size, we can use relative units such as rem or em to make our page layout and layout more flexible.

You can click here: small demo of flexible layout based on vw

As a result, in large size:

In a small size:

By comparison, you will find that the size of the text and the size of the picture are obviously different, but in the end, there is nothing uncomfortable with the typography, because, if you look at it carefully, you will find that although the font size is very different, but the line-wrapping position of the text is actually exactly the same, which is the visual sense of proportional scaling. You say, such a free and easy effect, what kind of mobile phone various resolution adaptation is still a problem? Is that a problem?

Right, directly into a drizzle, a few lines of CSS, all done! If you are lazy enough, you can even copy the CSS code of this article directly to your own project, and the comments do not need to be changed.

With such a low cost and such a good experience, why not try it in your own project as soon as possible?

Updated on February 8, 2017

After the practice of a large project, the following CSS is the best practice code based on rem and vm and calc:

Html {font-size: 16px;} @ media screen and (min-width: 375px) {html {/ * iPhone6's 375px size is used as 16px benchmark, 414px is exactly 18px size, 60020px * / font-size: calc (100% + 2 * (100vw-375px) / 39); font-size: calc (16px + 2 * (100vw-375px) / 39) } @ media screen and (min-width: 414px) {html {/ * 414px-1000px adds 1px (18px-22px) * / font-size: calc (112.5% + 4 * (100vw-414px) / 586); font-size: calc (18px + 4 * (100vw-414px) / 586) } @ media screen and (min-width: 600px) {html {/ * 600px-1000px adds 1px (20px-24px) * / font-size: calc (125% + 4 * (100vw-600px) / 400); font-size: calc (20px + 4 * (100vw-600px) / 400) } @ media screen and (min-width: 1000px) {html {/ * 1000px adds * / font-size: calc (137.5% + 6 * (100vw-1000px) / 1000) per 100 pixels of 0.5px; font-size: calc (22px + 6 * (100vw-1000px) / 1000) }} the above is about the content of this article on "how to achieve responsive typesetting and layout based on vw". I believe everyone has a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.