H5 Scalable Layout Scheme

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

Ib.flexible

Mobile-based adaptive solutions, please refer to the relevant articles here

Update "January 13, 2016"

First of all, heartfelt thanks @ Finish Yan (@SMbey0nd) help step on this pit, recall iOS from 7~8, from 8~9, have stepped on only at least one pit, really is also drunk.

The flexible plan for this side of the hand is temporarily upgraded as follows:

• For the OS 9_3 UA, do the temporary processing, mandatory dpr for, that is 1 scale 1 , even though sacrificing the HD scheme on these versions, but can only deal with this
• This version is not intended to be released to the CDN (nor to the TNPM), so everyone update the way, it is best to manually copy the code inline to the html , specific code can click here to download

Latest Version

0.3.2

Packing with Grunt

Run to npm install install the required dependent modules. For information on NPM, see Nodejs;

Run to grunt package the project. For grunt knowledge, see Gruntjs;

Dependent libraries

No

Examples of complete references:

<script src="http://g.tbcdn.cn/mtb/lib-flexible/{{version}}/??flexible_css.js,flexible.js"></script>

How to use

It is recommended for JS 内联处理 to do that before all resources are loaded to execute this JS.

After you execute this JS, you will html add a data-dpr property, as well as a style, to the (that is, document.documentelement) font-size .

After that, the elements in the page can be set in rem units. htmlis the font-size base pixel of REM.

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.5px1rem = 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.

The way the font does not use REM

The size of the font is not recommended with REM as a unit. So for the font setting, PX is still used as the unit, and the properties are used data-dpr to distinguish the sizes under different DPR.

For example:

div {    width: 1rem;     height: 0.4rem;    font-size: 12px; // 默认写上dpr为1的fontSize}[data-dpr="2"] div {    font-size: 24px;}[data-dpr="3"] div {    font-size: 36px;}

Manually Configuring DPR

Before the introduction of JS execution, you can manually set the DPR by outputting a meta tag. The syntax is as follows:

<meta name="flexible" content="initial-dpr=2,maximum-dpr=3" />

The initial-dpr DPR force is set to the given value, maximum-dpr comparing the system's DPR with the given DPR, taking the minimum value. Note: These two parameters can only be selected.

How to manually set the REM reference value

You can output the following CSS styles:

html {font-size: 60px!important;}

Some common APIs

[Number] Lib.flexible.dpr

DPR value of the current page

[Number] Lib.flexible.rem

REM reference value for the current page

[number| String] lib.flexible.rem2px ([number| String Digital])

Convert REM to px

[number| String] Lib.flexible.px2rem ([number| String Digital])

Convert px to REM

Lib.flexible.refreshRem ()

Refreshes the REM reference value of the current page

Grid systems need to introduce makegrid.js

<script src="http://g.tbcdn.cn/mtb/lib-flexible/{{version}}/makegrid.js"></script>

How to use

lib.flexible.makeGrid(params)

• [Object params]
  • Designwidth-Design Draft width
  • Designunit-Design draft minimum unit A (in PX)
  • ColumnCount-Number of grid columns
  • Columnxunit-Gate Grekon (in a unit)
  • Gutterxunit-Grid spacing (in a units)
  • Edgexunit-page left and right margin (in a units)
  • ClassName-Name of the grid style (can be omitted, default to Grid)

The corresponding CSS style can be output by passing in the visual definition of the grid specification.

lib.flexible.makeGridMode(modeName)

• [String Modename]

The scheme also presets several default raster specifications, respectively,,, 750-12 750-6 640-12 640-6 .

Using Meta output raster styles

<meta content="designWidth=750, desginUnit=6, columnCount=12, columnXUnit=7, gutterXUnit=3, edgeXUnit=4" name="grid" />

Or

<meta content="modeName=750-12" name="grid" />

Example of Grid code

<div class="grid">    <div class="col-4"></div>    <div class="col-4"></div>    <div class="col-4"></div></div><div class="grid">    <div class="col-6"></div>    <div class="col-6"></div></div><div class="grid">    <div class="col-3"></div>    <div class="col-4"></div>    <div class="col-5"></div></div

H5 Scalable Layout Scheme