Mobile-adapted REM

With the popularity of mobile devices such as mobile phones, mobile traffic can not be ignored, a site is not just a PC page is sufficient, mobile adaptation has become imperative. But the variety of mobile devices, screen size is also strange, can you find a way to fit all the phone screen?

The answer is REM.

As the saying goes, "Give a man a fish rather than a fisherman", but today I will do it in the opposite way, that is, to grant people fish. Because to tell you what devices like silverhalide, css pixels, PPI and other things, you will be dizzy (mainly I do not understand). Don't say much nonsense, first on the code.

1 /*Mobile Adapter Width|height|font-size = The amount of visual manuscript value/100rem; @lbl*/2@media screen and (max-width:359px) and (min-width:320px) {3 html,body{4font-size:50px!important;5     }6 }7@media screen and (max-width:374px) and (min-width:360px) {8 html,body{9font-size:56.25px!important;Ten     } One } A@media screen and (max-width:413px) and (min-width:375px) { - html,body{ -font-size:58.5px!important; the     } - } -@media screen and (max-width:639px) and (min-width:414px) { - html,body{ +Font-size:64.6px!important; -     } +} @media screen and (min-width:640px) { A html,body{ atfont-size:100px!important; -     } -}

　

REM, as its name implies, is the root element, which is a relative unit, and the difference between em is that REM is relative to the font-size,em of the root node HTML relative to the parent element font-size. Using REM is actually using media query to modify the font-size of HTML, then the size of the elements using REM will change accordingly, so we just need to write a copy of the CSS to be able to fit all the phone's screen. Although REM is not accurate under some browsers, it is only a handful, and if you need a very precise fit, you can use JS to calculate the font-size of the HTML.

Many developers hear that the first response to adaptation is how much the phone's screen width is, how much physical pixels are, and then considering adaptation. This is from the point of view of matching, take the visual manuscript to fit the mobile phone. Can't we just leave the equipment behind and start with the visual manuscript? Then let's take a look.

The designer's visual manuscripts are generally designed according to the 640px. When we get the visual manuscript, we first convert the width of the visual manuscript to REM, and we don't need to consider the resolution of the device, just by calculating the formula for the width of the visual manuscript = Font-size x rem. The width of the visual manuscript is given, we take 640px for example, Font-size and REM are two variables, we only need their product equals 640. We use a change-one approach, assuming rem=6.4, then the initial value font-size must be equal to 100px, we can adjust the width of the screen as needed to scale font-size. So if our 640px visual manuscript needs to be shown as 320px, we just need to reduce the font-size by half. What other 375px, 414px, all kinds of screen, just need to scale and so on. Like what:

1 320px:font-size = 320/640 * = 50px; 2 360px:font-size = 360/640 * =25px; 3 ......... 4 800px:font-size = 800/640 * = 125px;

In fact, according to the proportion of the font-size, I have to take the decimal point down, so that the width of the element will not exceed the total width. Just if our visual manuscript width to 640px, but need to be more than 640 device under the display, then there will be blurred images and so on, so we generally use large visual manuscript to fit the small screen. For example, you need to match 640px large screen, you can let the designer according to the width of 960px to design, then convert to 9.6rem, the initial value font-size=100px, and then adjust the size of the font-size according to the width of the screen to fit.

If you want more accurate adaptation, you can use the JS dynamic calculation of the width of the window to change the size of the font-size, Ali hand scouring the use of the flexible is also the way, the following is down to a flexible of the simplified version

1(function(Win) {2     varRemcalc = {};3     varDocel =Win.document.documentElement,4 Tid;5 6     functionRefreshrem () {7         //gets the width of the current window8         varwidth =docel.getboundingclientrect (). width;9         //greater than 640px Press 640 to calculateTen         if(Width > 640) {width = 640 } One         //the width of the window is fixed into 10 parts, which is 10rem. A         //according to the visual manuscript 640 640/10=64px so 1rem = 64px -         //640 Visual 80px*80px button conversion to rem 80/64 = 1.25rem -         //the width and height of the button is fixed at 1.25rem * 1.25rem the         //when the window width is scaled to 320px -         //so 1rem = 32px -         //The original 80px*80px button now changes to 1.25rem * 32px = 40px -         //button changes to 40px * 40px +         //other widths are similar -         //  +         //The CMS approach is similar A         //We just fixed the window width into 6.4 parts, i.e. 6.4rem at         //so 1rem = 100px -         //640 Visual 80px*80px button conversion to rem 80/100 = 0.8rem -         // .... The rest is similar . -         //  -         //  -         //Compare in         //In fact, it's the problem of calculating REM, the number of visual manuscripts, except 64 or 100. -         //Besides 100 is always better than 64 good mental arithmetic to         //even with sass, write a @function px2rem instead of mental arithmetic . +         //. 8rem total than input px2rem (80) Few characters -         //  the         //  *         varrem = WIDTH/10;//CMS Just change this line to var rem = width/640 * $DocEl.style.fontSize = rem + "px";Panax NotoginsengRemcalc.rem =rem; -         //error, Compatibility handling the         varActualSize = parsefloat (window.getComputedStyle (document.documentelement) ["Font-size"]); +         if(ActualSize!== rem && actualsize > 0 && math.abs (actualsize-rem) > 1) { A             varremscaled = rem * REM/ActualSize; theDocEl.style.fontSize = remscaled + "px" +         } -     } $  $     //function throttling to avoid frequent updates -     functionDbcrefresh () { - cleartimeout (TID); theTid = setTimeout (refreshrem, 100) -     }Wuyi  the     //window Update dynamic change font-size -Win.addeventlistener ("Resize",function() {Dbcrefresh ()},false); Wu  -     //when the page is displayed, the window size will change after the window is switched?.... AboutWin.addeventlistener ("Pageshow",function(e) { $         if(e.persisted) {Dbcrefresh ()} -},false); - Refreshrem (); -Remcalc.refreshrem =Refreshrem; Aremcalc.rem2px =function(d) { +         varval = parsefloat (d) * This. rem; the         if(typeofD = = = "string" && D.match (/rem$/)) {val + = "px" } -         returnVal $     }; theRemcalc.px2rem =function(d) { the         varval = parsefloat (d)/ This. rem; the         if(typeofD = = = "string" && D.match (/px$/)) {val + = "REM" } the         returnVal -     }; inWin.remcalc =Remcalc the }) (window); the  About //Koala Mobile Full station using REM is not a lot of the //mainly used 100% layouts such as width, height, padding the //There are also direct with PX font size using px fixed unchanged the //There is also the use of EM based on the font-size fixed line-height + //full station element using Box-sizing:border-box - //Multi-line ellipsis text-overflow:ellipsis;-webkit-line-clamp:2; the //Non-Main page many are pictures affect SEO see very short of the front endBayi //use REM best text to specify font size or inherit HTML font-size

Mobile-adapted REM