Mobile REM Layout Solution

Scenarios that reference http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

Https://github.com/hupan508/lib-flexible

Note the point.

1, if the HTML set meta, JS will use the META tag scaling.

<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >
<meta name= "viewport" content= "Width=device-width, initial-scale=1, User-scalable=no" >
<meta content= "Telephone=no" name= "Format-detection"/>
<meta content= "yes" name= "apple-mobile-web-app-capable"/>
<meta content= "yes" name= "Apple-touch-fullscreen"/>
<meta content= "Telephone=no,email=no" name= "Format-detection"/>

If you add a meta font to write a px, you can

　　　　For media queries use images under different devices see

Http://www.uigreat.com/api/client_manager/index.php?aid=239&module=content&wenzhang

Common Media Queries

1190000002711737

2, Cssrem

Using the Cssrem tool, convert Px--rem

Modifying the conversion scale

Parameter profiles: Sublime Text, Preferences, package Settings, Cssrem

• 　　px_to_rem-px to REM unit ratio, default is 40.
• max_rem_fraction_length-px to rem maximum length of the number of parts. The default is 6.
• available_file_types-Enable the file type of this plug-in. The default is: [". css", ". Less", ". Sass"].

convert px in visual artwork to REM

First, the current size of the visual manuscript is divided into 640 , 750 and, 1125 these three kinds.

The current scheme will divide the 3 categories of visual manuscripts 100份 (for later compatibility with VH,VW units). Each part is called a unit A. At the same time, 1rem units are identified as 10a. Take 750 examples of visual manuscripts:

　　　　1a = 7.5px　　　　1rem = 75px

Therefore, for the dimension conversion of elements on a visual manuscript, you only need to 原始px值 divide rem基准px值 . For example, 240px * 120px elements, and finally converted to 3.2rem * 1.6rem.

3.

Mobile REM Layout Solution