Summary of mobile Web Usage of unit rem, webrem

Summary of mobile Web Usage of unit rem, webrem

I have recently written a lot of h5 pages and web project development projects, but for the Adaptive Layout settings, there has been no unified standard in the team, and it is likely that there are no standards, it may be that I am too obsessed with uniformity.

Before the Web App development, in terms of adaptability, the width is usually indicated by the percentage of pass, and the height is written to a balance value between iPhone 6 and iPhone 5, our design draft is the 640*1136 standard of the iPhone 5, so the height is generally an approximate value, and the width and height of various icons are also balanced values, and then some styles are set through media queries, for example, the background image is multiple times, the base font size, and the icon width and height.

However, one problem is that the physical size (height) of the page on a variety of mobile phones is the same, so on the screen mobile phone will feel that the page is a little small, the cell phone page is slightly larger. The design also often asks us to modify the font size and spacing.

Sometimes, the default unit settings of some frameworks or smart settings of automated tools are used. I have never figured out how to use an algorithm, so I will pull some articles from the great gods. Here I will write a summary through my own understanding.

So how does html5 adapt to a large number of mobile devices? To complete the work, we need to find a simpler and more efficient method.

　　Solution 1:

　　(1) brief introduction of the solution: Based on rem

Prerequisites:The layout sizes of the page elements are all set based on the design draft and other proportions.

Set a base font-size value for the html root node. Then, the layout of all elements on the page is set in rem units relative to the font-size value. How can we obtain the basic font-size value?

If font-size is set through media query, only a part of the problem can be solved, and adaptation cannot be completed because there are too many screen width types on the mobile phone, therefore, the value of font-size must be calculated using js and the ratio of deviceWidth of the current viewport to the width of the design draft. For example, the size of the design draft is 640px, And the deviceWidth of the iPhone 5 is 320px, the calculated font-size value is 320/640 = 0.5, because the resulting font-size is too small to calculate, and some browsers may be incompatible with a small font size, therefore, the font-size is increased by 100 times, so the final calculated font-size is 320/640*100 = 50 (px). Of course, this value is calculated based on the design draft, according to the calculation rules, the following lists the font-size values of several common design drafts:

deviceWidth = 320，font-size = 320 / 6.4 = 50pxdeviceWidth = 375，font-size = 375 / 6.4 = 58.59375pxdeviceWidth = 414，font-size = 414 / 6.4 = 64.6875pxdeviceWidth = 500，font-size = 500 / 6.4 = 78.125px

You can add the following code to the script Tag:

(Function () {document. addEventListener ('domainloaded', function () {var html = document.doc umentElement; var ready wwidth = html. clientWidth; html. style. fontSize = bytes wwidth/6.4 + 'px '; // equivalent to html. style. fontSize = bytes wwidth/640*100 + 'px ';}, false) ;}) (); // This 6.4 value is determined based on the horizontal width of the design draft, assume that your design draft is 750. style. fontSize = bytes wwidth/7.5 + 'px ';

At this point, the basic font-size value is determined, and the font-size value is 100 times the ratio of the deviceWidth of the mobile phone to the design draft (important)

(2) how to set the width and height and margins of page elements?

For example, if the width and height of a design draft is 140px and the left margin is 50px, the css should be written as follows:

. Icon {width: 1.4rem;/* pixel conversion rem: 140px/100 = 1.4rem */height: 1.4rem; margin: 0 0 0. 5rem ;}

Because the font-size of html is increased by 100 times, the actual pixels of the design draft must be divided by 100,140 px/100 = 1.4rem in the calculation of rem; the actual pixel size is automatically calculated based on the ratio of deviceWidth to the horizontal width of the design draft.

However, this exposes a disadvantage of using sprites in the background (because font-size has too many decimal places, calculate the actual background image size. If the browser precision is insufficient, the location deviation may occur when the background image position is background-position ), when setting background-size and background-position by converting rem, background image misplacement may occur in some mobile phone models. However, if rem settings are not required, background-size and background-position cannot be adapted. (The rem Conversion Method for background-size and background-position is the same as the width and height settings mentioned above. They are all design draft sizes (this should be the original sprite size) divided by 100 times)

The simplest method is,Do not use spritesWhen a single background image is used, there is no need for background-position. You only need to set background-size: contain;. The disadvantage of this is that you cannot use sprite images and image requests increase, this method is applicable when there are few page icons.

　　Solution 2:

　　Media query:

@media screen and (max-width: 314px) {  html {    font-size: 10px;  }}@media screen and (min-width: 315px) and (max-width: 342px) {  html {    font-size: 11px;  }}@media screen and (min-width: 343px) and (max-width: 390px) {  html {    font-size: 12px;  }}@media screen and (min-width: 391px) and (max-width: 650px) {  html {    font-size: 13px;  }}@media screen and (min-width: 651px) {  html {    font-size: 18px;  }}

　　Solution 3:

No matter how wide you are, you need to set the global html value. (Here? It refers to the actual pixel value of your volume .) If the font-size: 100% of html is defined, that is, the default 16 PX, set the element css? /2/16 if the html font-size: 62.5% is defined, that is, the element css is set? /2/10