Mobile JS control rem, fit font

Method One: Set FontSize according to the iphone 5 adapter 1em=10px 320

//"() ()" indicates a self-executing function(function(Doc, win) {varDocel =Doc.documentelement,//mobile phone rotation events, most mobile browsers support Onorientationchange if not supported, the original resize can be usedresizeevt = ' Orientationchange 'inchWindow? ' Orientationchange ': ' Resize ', Recalc=function () {        //clientwidth: Gets the width of the object's visible content, excluding scroll bars, excluding borders        varClientWidth =Docel.clientwidth; if(!clientwidth)return; DocEl.style.fontSize= 10* (clientwidth/320) + ' px ';   };  Recalc (); //determine if listening events are supported, stop if not supported  if(!doc.addeventlistener)return; //Registering Rollover EventsWin.addeventlistener (Resizeevt, Recalc,false); }) (document, window);

Method Two: According to iPhone6 size design is 375/25=15px

(function(Docs, win) {varDocels =docs.documentelement, Resizeevts= ' Orientationchange 'inchWindow? ' Orientationchange ': ' Resize ', Recalcs=function () {  //Getboundingclientrect () This method returns a Rectangle objectWindow.rem= Docels.getboundingclientrect (). Width/25; DocEls.style.fontSize = Window.rem + ' px ';};  Recalcs (); if(!docs.addeventlistener)return; Win.addeventlistener (Resizeevts, Recalcs,false);}) (document, window);

Mode three: Using Media

1HTML {2 font-size:20px;3 } 4 @media only screen and (min-width:401px) { 5HTML {6 font-size:25 px!important;7     } 8 } 9 @media only screen and (min-width:428px) {10HTML {font-size:26.75 px!important;12     }13 }@media only screen and (min-width:481px) {15HTML {Font-size:30 px!important;17     }18 }@media only screen and (min-width:569px) {20HTML {Font-size:35 px!important;22     }23 }@media only Screens and (min-width:641px) {25HTML {Font-size:40 px!important;27     }28Copy the Code

Recommended JS mode settings

Mobile JS control rem, fit font