CSS-Responsive layouts

Based on the design draft, assuming that the design of the vertical screen width of 750px, take the root element of the font-size is 50px
Under Iphone6 (375px), Devicewidth=7.5rem, this is the devicewidth in viewport,
So the FontSize calculation formula is font-size=devicewidth/7.5 50px, so we can set the font-size of the iphone6 under HTML to 312.5%.
On a device of this size, if you want to set the font size of a P element to 18px, you can set it to 0.36rem

In IPhone5S 320px, proportionally converted, font-size=320/7.5=85.33 or (320/375) *50px

You can use this method to dynamically calculate the root element font size:

!function () {            var htmlel = document.getelementsbytagname (' html ') [0];            var fitpage = function () {/* The calculate of with from                zepto  *                /var w = htmlel.getboundingclientrect (). width; Returns a Domrect object                 w = Math.Round (w);                w = w > 750? 750:w;                var neww = w/750 *;                HtmlEl.style.fontSize = neww + ' px ';            }            Fitpage ();            var T;            var func = function () {                cleartimeout (t);                t = setTimeout (fitpage);            }            Window.addeventlistener (' resize ', func);        } ();

　　

Note: you need to have the following declaration in HTML, width=devicewidth
<meta name= "viewport" content= "width=devicewidth,initial-scale=1.0,maximum-scale=1.0,user-scalable= No ">

CSS-Responsive layout