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

This article mainly introduces the relevant knowledge of "how to use rem or viewport for mobile adaptation". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to use rem or viewport for mobile adaptation" can help you solve the problem.

One: rem adaptation

Rem is the font-size=1rem of the root tag relative to the font size (font-size) of the root element. It can be called a relative unit, that is to say, we can dynamically update the value of the root element font size (font-size) through the size of the viewport, thus dynamically updating the relative value of rem, so that the mobile web page can be adapted to various models of mobile phones. If you don't say much, code first.

Js code (used to dynamically modify the value of its root tag font-size):

/ / rem adaptation / / rem adaptation principle: changed the number of css pixels occupied by an element on different devices / * advantages and disadvantages of rem adaptation: it does not destroy the perfect viewport disadvantages: the conversion of PX values to rem is too complex * / (function () {var styleNode = document.createElement ("style")) / * when not divided by 16:00, 1em occupies the viewport width, then the width and height of the elements on its page will basically be smaller than 1rem, and the browser's calculation is not particularly accurate and prone to deviation * / / var w = document.documentElement.clientWidth / * so at this point we divide by 16, so that the 16rem occupies the full screen, and the rem for most elements in the page will exceed 1rem * / var w = document.documentElement.clientWidth/16. / / get the viewport size / * set the fontsize of the root element at this time, add the font-size attribute * / styleNode [XSS _ clean] to the style style of html = "html {font-size:" + w+ "pxviewport size}"; / / add the style tag to the head tag containing html {font-size:w;} document.head.appendChild (styleNode);}) ()

Html and css codes:

* {margin: 0; padding: 0;} # test {width: 2Reme; height: 2Reme; background: pink; text-align: center; line-height: 2Reme;} test

Let's take a look at what happens to the elements of the page by changing the model of the phone (the size of the viewport).

When we change the model of the phone (remember to refresh it when the change is complete), the size of the viewport has also changed, and the width and height of the test element has also changed, so we can adapt to the mobile side.

Rem adaptation principle

Changed the number of css pixels occupied by an element on different devices

Advantages and disadvantages of rem adaptation

Pros: no damage to the perfect viewport

Cons: PX conversion is too complex (let's use less to solve this problem)

Less+rem solves the complex problem of conversion

The use of less operation reduces the need for manual calculation of the rem value, we can also use stylus,scss and other css preprocessors to calculate the Rem. this example needs to be combined with the above js code to match.

At this point, our less code is:

/ * at this time, our 750th is the size of the design drawing. The specific value should be set according to the size of the design drawing * / / * the logic of 750/16rem is: because 16rem occupies the total width of the page, 750 (width of the design drawing) / 16rem obtains the ratio of 1rem to the design drawing * / / * which is suitable for us to design the size according to the width of the element in the design drawing. For example, the width and height of test is 200px. Then we can write it like this: * / @ rem:750/16rem # test {width: 200 Compact; height: 200; background: pink; text-align: center; line-height: 200;}

Be careful! Need to combine the above js code to use together!

Two: viewport adaptation

For viewport adaptation, you actually change the size of the viewport, that is, you can think of it as a near-size principle, and the visual size of the current element decreases as you decrease the width of the viewport, and increases as you increase the width of the viewport. Thus the adaptation of the mobile end is carried out. Say no more and go on with the code:

Js Code:

(the value of function () {/ * targetW is the width size of the design drawing, and the set width size is 640 * / var targetW = 640; / * get the viewport zoom ratio * / var scale = document.documentElement.clientWidth/targetW; / * get the meta label * / var meta = document.querySelector ("meta [name = 'viewport']") / * add the scale to it * / meta.content= "initial-scale=" + scale+ ", minimum-scale=" + scale+ ", maximum-scale=" + scale+ ", user-scalable=no";}) ()

Html and css codes:

* {margin: 0; padding: 0;} / * set its width to half the size of the design drawing (the size of the design drawing is 640px) and its height to 100px * / # test {width: 320px; height: 100px; background: pink Text-align: center; font-size: 32px; line-height: 100px;} test

You can see that the size of the element does not change at this time (because we are changing the size of the viewport, not the size of the element), but it still occupies half of the viewport (changing the size of the element in the current interface according to the zoom ratio). This is the use of viewport for mobile adaptation.

The principle of viewport adaptation

In the viewport adaptation scheme, each element occupies the same number of css pixels on different devices. But the proportion of css pixels and physical pixels is not the same, proportional * /

Advantages and disadvantages of viewport adaptation

The size measured on our design is the pixel size that we can set, that is, the amount is set.

Shortcomings destroy perfect viewports

This is the end of the introduction to "how to use rem or viewport for Mobile adaptation". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.