Mobile-based adaptation scheme-rem (Basic article)

　　

　　Common mobile Web adaptation scenarios generally have 3 ways, such as:

　　

　　　　①: Fixed height, percent width (percent adaptation is simple, generally used to do some of the less adaptable pages, such as only some text and pictures, such as simple screen adaptation)

　　　　②:flex (more layouts for complex pages.) Specific reference to Ruan Yi Feng great god written-flex layout tutorial: Grammar and examples

　　　　　　Http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool ( Grammar Chapter )

　　　　　　http://www.ruanyifeng.com/blog/2015/07/flex-examples.html ( example )

　　　　③: Media query (CSS3 Media Finder Usage Summary:http://www.bubuko.com/infodetail-268180.html)

Note:　　　　 Flex and Media queries these 2 scenarios enable daily responsive development of the mobile side. But the media query is not recommended, because the different screens for different pages to go to write style alone, very cumbersome, and inefficient.

　　　　Rem:

Here are some of the more well-written articles I have read in the process of studying REM, which are easy to understand and comprehensive, and are suitable for getting started. After reading it, I knew about REM almost, so I stopped repeating it.

http://www.w3cplus.com/css3/define-font-size-with-css3-rem　　C 　　　　 SS3 rem Setting font size

https://www.jianshu.com/p/b00cd3506782　　　　 Mobile End Page Adaptive solution-rem Layout Basics　

https://www.jianshu.com/p/985d26b40199　　　　　　 Mobile phone-side page Adaptive Solution-rem Layout Advanced version (with source code example)

Recently learned REM with a video and then wrote a simple demo. With JS dynamic change the root element font size, with the above link quoted in the JS different, personal feeling more simple, easy to understand　

　　

<!DOCTYPE HTML><HTML>    <Head>        <MetaCharSet= "UTF-8">        <Metaname= "Viewport"content= "Width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />        <title>Dynamically modifying the Font-size method-rem</title>        <styletype= "Text/css">            * {margin:0;padding:0;            }HTML{font-size:16px;            }. Box{width:10rem;Height:10rem;Background-color:Black;            }. Text{Color:#fff;            }                    </style>    </Head>    <Body>        <Divclass= "box">            <Pclass= "text">Hello REM</P>        </Div>                <Scripttype= "Text/javascript">            //get window Visual widthLet htmlwidth=Document.documentElement.clientWidth||Document.body.clientWidth;                        Console.log (Htmlwidth); //get window Visual heightLet htmldom=document.getElementsByTagName ('HTML')[0];                        Console.log (Htmldom); //This is divided by 10 to make it easier to calculate, not to divide the values that are too outrageous, such as 200, the browser does not recognize such a small value            //here Htmldom the calculated value, which is equivalent to the HTML setting font-sizehtmlDom.style.fontSize=Htmlwidth/ Ten + 'px'; </Script>    </Body></HTML>

　　　　

　　　　

　　　　

　　　　

　　　　

　　　　

　　

Mobile-based adaptation scheme-rem (Basic article)