Rem.js Mobile Layout Example Tutorial

Recently want to buy the need to develop micro-station, the public number embedded in the mobile Web, the summary method can use CSS3 Direct use of the percentage layout, you can use bootstrap to do a responsive layout and other methods, the individual feel the need to see the project, The author uses rem.js to carry on the mobile front-end layout, feels easy to contact, very good, the following brief introduction related knowledge.

First on:

Example: http://www.kwstu.com/ResourcesView/kwstu_201707311542353051

1, first prepare Rem.js file, directly on the file, this file can be downloaded online.

!Newfunction() {var a =This; A.width = 750, a.fontsize = 100function  () {var B = (document.body && Document.body.clientWidth | | document.getElementsByTagName ("HTML") [0].offsetwidth]/ A.width; return B > 1? 1: b}, a.changepage = function () {document.getelementsbytagname ("html") [0].setattribute ("Style", "font-size:" + a.widthproportion () * a.fontsize + "px!important" , function)};

The above code with the standard CSS file, can achieve the following effect:

Front-end PS design file 750 pixels, 750 should be the screen size of the iphone 6p , the layout of the unit mapping relationship is as follows: 750px is equivalent to 7.5rem;30px. 3rem; The layout method is the same as the PC-side div+css, Units with REM can be made out of the page has automatic scaling effect, in order to adapt to the mobile screen needs of different.

The core CSS code is as follows:

HTML{font-family:"Microsoft Yahei", "Song Body";-webkit-text-size-adjust:100%;font-size:100px;}Body{margin:0;Max-width:750px;Min-height:100%;Min-width:320px;margin:0 Auto;Color:#666666;Background-color:#fff;-webkit-overflow-scrolling:Touch;font-size:. 3rem;}* {-webkit-box-sizing:Border-box;box-sizing:Border-box;}H1, H2, H3, H4, H5, form, p, UL, input{margin:0px;padding:0px;}input, textarea{font-family:"Microsoft Yahei", "Song Body";font-size:. 27857142rem;Color:#666666;}Li{padding:0px;margin:0px;Line-height:180%;List-style-type:None;}: Focus{Outline:0;}. Substring{Overflow:Hidden;White-space:nowrap;Text-overflow:ellipsis;}. nowrap{White-space:nowrap;}. Clear{Clear:both;Height:0px;font-size:0px;Line-height:0px;}

With the above CSS code can be.

Rem.js Mobile Layout Example Tutorial