Mobile-side Layouts

Http://caibaojian.com/mobile-responsive-example.html

It is based on what calculation, this is related to the design manuscript, take NetEase, its design manuscript should be based on iphone4 or iphone5, so its design draft vertical when the horizontal resolution is 640px, in order to calculate convenience, take a 100px font-size for reference, Then the width of the BODY element can be set to Width:6.4rem, so the HTML font-size=devicewidth/6.4. This devicewidth is the devicewidth in the viewport setup. According to this calculation rule, the font-size size of the HTML in the four sheets beginning with this section is as follows: ·

code from http://caibaojian.com/mobile-responsive-example.htmldeviceWidth = 320,font-size = 320/6.4 = 50pxdeviceWidth = 375,font-size = 375/6.4 = 58.59375pxdeviceWidth = 414,font-size = 414/6.4 = 64.6875pxdeviceWidth = 5 00,font-size = 500/6.4 = 78.125px

• (1) Get the width of the body element by dividing the horizontal resolution of the design draft by 100:

  Code from http://caibaojian.com/mobile-responsive-example.html If the design is based on iphone6, the width of the horizontal resolution of 750,body is 750/100 = 7.5rem If the design is based on IPHONE4/5, the width of the horizontal resolution of 640,body is 640/100 = 6.4rem

• (2) Layout, the dimension of the design dimension divided by 100 to get the size of the CSS
• The height of the player is 210px, the CSS should be written when writing style: Height:2.1rem. The reason for taking a 100 as a reference is to calculate REM convenience here!
• (3) After Dom ready, set the HTML font-size with the following code:

  Document.documentElement.style.fontSize = document.documentelement.clientwidth/6.4 + ' px ';

• 6.4 Just for example, if it is a 750 design, it should be divided by 7.5.
• (4) Font-size may require additional media queries, and Font-size cannot use REM, such as NetEase's settings:

  @media screen and (max-width:321px) {    . m-navlist{font-size:15px}} @media screen and (min-width:321px) and (max-width : 400px) {    . m-navlist{font-size:16px}} @media screen and (min-width:400px) {    . m-navlist{font-size:18px}}

Finally, there are 2 things to note:

First, if the use of NetEase this approach, the viewport should be set as follows: ·

Code from Http://caibaojian.com/mobile-responsive-example.html<meta name= "viewport" content= "initial-scale=1, maximum-scale=1, minimum-scale=1 ">

Second, when Devicewidth is larger than the horizontal resolution of the design, the font-size of the HTML is always equal to the horizontal resolution/body element width: The
original link:

This is done because when the devicewidth is greater than 640, the physical resolution is greater than 1280 (this is the value of the device devicepixelratio), should go to visit the PC website. The fact is, you visit NetEase from the mobile phone, see the touch screen version of the page, if you access from the pad, see is the computer version of the page. If you want to do this, just change the code in the third step of the summary to a little bit: •

code from Http://caibaojian.com/mobile-responsive-example.htmlvar devicewidth = Document.documentelement.clientwidth;if (Devicewidth > 640) devicewidth = 640; Document.documentElement.style.fontSize = devicewidth/6.4 + ' px ';

Front-end Development blog

Mobile-side Layouts