Use Flexible to adapt to mobile html pages, and flexible to adapt

Use Flexible to adapt to mobile html pages, and flexible to adapt

Source article: terminal adaptation of mobile Taobao H5 page using Flexible

Source: Airen's blog

Source Address: http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

--------------------------------------

 

Some time ago I read my blog article [using Flexible to adapt to the terminal on the H5 page of shoutao], which benefited a lot. I wrote a small demo and recorded it to prevent forgetting it, mainly as follows:

1. meta

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

2. Load the flexible_css.js and flexible. js files to the project.

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

3. Layout

I. basic layout: rem

Convert the px Unit in the visual draft to the rem unit:

1) html element size = visual draftPx value/Rem reference value

2) rem reference value = visual draft px/10

For example, if the width of the visual draft is 750/10 PX, the width in html is = 75rem, and the reference is as follows. If the width of a small part of the visual draft is PX, the width of the content in html is 150/75 = 2rem.

Ii. font size: px

The font size is in px units and is used as needed[data-dpr]Attribute to differentiatedprText font size.

Div {width: 1rem; height: 0.4rem; font-size: 12px; // fontSize with dpr 1 is written by default} [data-dpr = "2"] div {font-size: 24px ;} [data-dpr = "3"] div {font-size: 36px ;}

 

Demo QR code: (font size is not adapted)

 

The effect is as follows:

As mentioned above, I personally understand that there may be errors. Thank you very much for your correction!