[Mobile adaptation] How to Adapt mobile Web to screen adaptation (3)

[Mobile adaptation] How to Adapt mobile Web to screen adaptation (3)

There will always be simple rules behind the complex and chaotic world

Mr. Chew Mar.8th. 2016

1 | Fisrt

I wrote two articles about mobile adaptation:

• How to Adapt to the screen of mobile Web (I) focuses on how to adapt the size (width, height, margin, padding, etc.) to rem.

• How to implement a pixel border introduces the concept of viewport, physical pixel, CSS pixel, and their relationship by introducing the implementation of a physical pixel border.

This is the third article on mobile adaptation,This section introduces vw and SLS, and summarizes the three articles.

Screen adaptation is easy to ignore, butProducts that keep improving are essential. ForFor Web development job seekers, it is also a classic problem that must be understood clearly.

 

Second | Second  

In fact, the size (width, height, margin, padding, etc.) adaptation, in addition to the use of rem, you can also use CSS 3 of The VL and vw.

Length units representing 1% of the viewport size for viewport width (vw), height (vh), the smaller of the two (vmin), or the larger of the two (vmax).

It means

• Vw represents 1% of the viewport width, that is, the viewport width is divided into 100 parts, and 1 vw represents the width of 1 part.

• The height of the image is the height of the image. The rule is the same as that of vw.

• Wmin is the smallest of the two VWS; vmax is the largest of the two.

At first glance, isn't it the percentage in CSS?

 

Div {width = 1vw ;}
Equivalent
Div {width: 1% ;}

That's right, but we can feel its magic when we want to implement a picture similar to the jiugongge image.

3 | Third

Here, we can take a short break. Now we will make a summary of the three articles.

When reviewing the implementation of a physical pixel border in the previous issue, we mentioned two implementation methods:

• The whole page is scaled, and the viewport is set to scale.

• Scale a single element, transform scale

The border of a single element cannot be scaled to a rounded corner. The whole page is scaled in the same way as the CSS standard.

 

What vw (VL) and rem need to solve is the adaptation of dimensions. The difference between vw (VL) and rem is as follows:
1. Compatibility. vw is not compatible with Android 4.3 and the following built-in browsers

2. Rich plug-ins for px-to-rem Conversion

What is the market share of Android 4.3 and below in China? The statistical result of umeng is about 31%, which is large.

Si | The End

There are still many topics on mobile adaptation. For example, how many resolution materials are output by a designer to save traffic and ensure clarity?

No matter what the topic is, the premise is understandingThe concepts of viewport, CSS pixels, and physical pixels and their relationships.So the three articles I have compiled so far are in Mobile adaptation knowledge.Very important basic knowledge.

Therefore, you are welcome to view the first two articles. If you do not write correctly, you are welcome to make a brick.

 

The blog mainly posts technical articles. In addition to technical articles, the public account will also post entrepreneurial stories, front-end entry, and experience stories around Shenzhen. Please pay attention to them.