你的位置:首页 > 网页设计

[网页设计]使用Flexible适配移动端html页面


前段时间看了大神的博客文章【使用Flexible实现手淘H5页面的终端适配】(地址:http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html),受益良多,写了个小demo,记录一下以防忘记,需要注意几点,如下:

1. meta 

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

2.将flexible_css.js,flexible.js文件加载到项目中

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

3.布局

i. 基本布局:rem

将视觉稿中的px单位转换成rem单位 :

1)html元素尺寸 =  视觉稿px值 / rem基准值

2)rem基准值  =  视觉稿宽度px / 10

例如:视觉稿宽度750px,则html中的宽度就是750 / 10 = 75rem,然后以这个为基准,如果视觉稿中某块小内容宽度是150px,则html中这块内容宽度就是 150 / 75 = 2rem

ii. 字号:px

字号用px单位,并根据情况用[data-dpr]属性来区分不同dpr下的文本字号大小。

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;}

 

demo二维码:(字号未做适配)

 

效果如下:

以上,个人理解,总结出的可能存在错误,欢迎指出,不甚感激!