[Learn IT outside] rem and viewport and remviewport of mobile webpage self-adaptation

[Learn IT outside] rem and viewport and remviewport of mobile webpage self-adaptation

When writing a mobile phone webpage, the pixel problem is very confusing. Beginners often give up learning because of a small problem or fail to understand it thoroughly.

I have been confused for a long time when I was learning to write a mobile phone webpage. The following problems have occurred:

The image material is designed in 640px * 330px pixels and placed in img, And the img is set to full-screen style:

.img{    width:100%;    height:16.5rem;]

PS: I set the html

html{    font-size:20px;    }

Therefore, according to the rem algorithm, the img height should be 330px/20px = 16.5rem (how to use rem? The next article will be explained in a layman's vernacular)

Debugging results in chrome Google browser at this time, found that the image width has changed to 980px, and then various calculated rem is not correct, I really don't want to understand, why is my picture obviously 640px width, how was it zoomed in to 980 in the browser? Later I read the articles from various online experts and found thatBrowsers on mobile devices set their default viewport to 980px or 1024px.

Therefore, you need to add the following code in

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

The meta tag is used to make the current viewport width equal to the width of the device, and manual scaling is not allowed. Users may not be allowed to zoom in or out different websites, but the viewport width must be equal to the width of the device. This should be the effect everyone wants, if you do not set this way, the default viewport wider than the screen will be used, that is, the horizontal scroll bar will appear.

What are the functions of this meta tag named viewport?

The meta viewport label was first introduced by Apple in its safari browser to solve the viewport problem of mobile devices. Later, Android and various browser vendors followed suit and introduced support for meta viewport, which proved to be very useful.

In Apple's specifications, meta viewport has six attributes:

Width	SetLayout viewportIs a positive integer or string "width-device"
Initial-scale	Set the initial scaling value of the page to a number with decimals.
Minimum-scale	The minimum scaling value of a user, which is a number with decimal digits.
Maximum-scale	The maximum scaling value of a user, which is a number with decimal digits.
Height	SetLayout viewportThis attribute is not important to us and is rarely used.
User-scalable	Whether to allow scaling. The value is "no" or "yes". "no" indicates no, and "yes" indicates allow.

These attributes can be used at the same time, or separately or in combination. Separate multiple attributes with commas.