Mobile Web page Font size two

Set the page font size (px) According to the font size in the design, on the phone side, because different devices will have different, converted into REM units.
REM is the "font size of the root element" that can be learned through this article Http://www.w3cplus.com/css3/define-font-size-with-css3-rem

Take 640px width As an example, set html{font-size:20px;}
Then the original PX unit in CSS divided by 20, and REM, such as 120px, write 6rem
After all set up, this page is suitable for 640 of the mobile phone, that if not 640 of the phone to do? Add this script to the page:

<ScriptType="Text/javascript" >(function(Doc, Win) {var docel = doc.documentelement, resizeevt =' Orientationchange 'InchWindow?' Orientationchange ':' Resize ', Recalc = function () { var clientwidth = docel.clientwidth; if (!clientwidth) return; docEl.style.fontSize = (clientwidth/ 640) + ' px ';}; if (!doc.addeventlistener) return; Win.addeventlistener (resizeevt, Recalc, false); Doc.addeventlistener (' domcontentloaded ', Recalc, false);}) (document, window); </script>                 

where docEl.style.fontSize = (clientwidth/640) + ' px '; In 20 is the HTML set FONT-SIZE,640 is the PSD image width, if the PSD is designed to be 1080, then replace 1080.

Mobile Web page Font size two