Mobile end-to-end formula 20170707

1.Meida Queries

meida queriesWay can be said to be my early adoption of the layout, it is mainly by querying the width of the device to execute different css code, and finally achieve the interface configuration. The core syntax is:

screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/ /*你的css代码*/}

Advantages

• media querycan achieve the device pixel ratio of judgment, simple method, low cost, especially for mobile and PC maintenance of the same set of code time. Currently like Bootstrap frames using this way layout
• The picture is easy to modify, just modify the CSS file
• Adjust the width of the screen without refreshing the page to respond to the display

Disadvantages

• Large code size, maintenance inconvenient
• In order to take into account the large screen or high-definition devices, will cause other equipment resources waste, especially loading picture resources
• In order to take into account the mobile and PC side of the respective response of the display, will inevitably lose their own unique interactive mode

Flexible layout

It's viewport fixed:<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

According to rem the page magnification dpr , then viewport set to 1/dpr .

• If the DPR of Iphone6 Plus is 3, the overall page magnification is 3 times times, and 1px (CSS units) defaults to 3px (physical pixels) in plus.
• Then viewport set to 1/3 so that the overall page retracts to its original size. Thus achieving high definition.
  
  

The width of the page when the entire page is displayed in the device is equal to the device's logical pixel size, that is device-width . The device-width formula for this is:

设备的物理分辨率/(devicePixelRatio * scale), in the scale case of 1 device-width = 设备的物理分辨率/devicePixelRatio .

Control datum values by using the following code rem (design draft to 720px take the actual size of the width amount)

!function (D) {var c = d.document;var a = c.documentelement;var B = d.devicepixelratio;var F;functionE) {var h = a.getboundingclientrect (). width, G;if (b = = =1) {h =720}if (h>720) H =720; //set the limit value of the reference value G = h/7.2; a.style.fontsize = g + " px "} if (b > 2) {b = 3} else {if (b > 1) {b = 2} else {b = 1}} a.setattribute (" DATA-DPR ", b); D.addeventlistener ( "resize",  function (200)}, false); E ()} (window);            

Mobile end-to-end formula 20170707