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

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

<script src="build/flexible_css.debug.js"></script>
<script src="build/flexible.debug.js"></script>

或加载阿里CDN的文件:

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

2. 布局

i. 基本布局:rem

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

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

例如:视觉稿宽度750px,则html中的缩放倍率就是750 / 10 = 75,然后以这个为基准值,如果视觉稿中某块小内容宽度是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;
}

兼容UC浏览器:

uc浏览器判断到页面上文字居多时,会自动放大字体优化移动用户体验。
添加以下头部可以禁用掉该优化

<meta name="wap-font-scale" content="no">

demo二维码:(随便写的,未注意规范,字号未做适配)

效果如下:

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

使用Flexible适配移动端html页面 - demo记录的更多相关文章

  1. 使用flexible适配移动端h5页面

    flexible是淘宝提供的一套REM手机适配的库,用法也非常简单 首先,在页面中引入相关资源 包括flexible.js和flexible_css.js(用于清除默认样式),或者通过cdn方式引入 ...

  2. 使用Flexible实现手淘H5页面的终端适配【转】

    曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论—— ...

  3. 使用Flexible实现手淘H5页面的终端适配(转)

    曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论—— ...

  4. 教你如何用 lib-flexible 实现移动端H5页面适配

    前话 好久没写教程了(可能会误导新手的菜鸟教程( ̄▽ ̄)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...

  5. (转)使用Flexible实现手淘H5页面的终端适配

    原文链接 曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面 ...

  6. [转]使用Flexible实现手淘H5页面的终端适配

    曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论—— ...

  7. 移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  8. [转]:移动端H5页面高清多屏适配方案

    原文链接:http://www.tuicool.com/articles/YJviea 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们 ...

  9. 解惑好文:移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

随机推荐

  1. PAT A 1030. Travel Plan (30)【最短路径】

    https://www.patest.cn/contests/pat-a-practise/1030 找最短路,如果有多条找最小消耗的,相当于找两次最短路,可以直接dfs,数据小不会超时. #incl ...

  2. Reversing Bits in C

    英文原文: http://corner.squareup.com/2013/07/reversing-bits-on-arm.html 本文讲解翻转bit位的一些方法,例如如何将1001 1101变为 ...

  3. MIME列表

    .asx,video/x-ms-asf.xml,text/xml.tsv,text/tab-separated-values.ra,audio/x-pn-realaudio.sv4crc,applic ...

  4. ExtJS 中自定义类

    首先我们来看一看在Javascript中,是怎样自定义类的: var Person = function (name, age) { this.Name = ""; this.Ag ...

  5. foreach的用法

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  6. CodeForces 515A

    A. Drazil and Date time limit per test 1 second memory limit per test 256 megabytes input standard i ...

  7. python练习

    创建一个简单的姓名和编号系统,让用户输入一组人的姓名和编号,实现提供按照编号或姓名排序输出的功能. nums = [] names = [] Afternums = [] Afternames = [ ...

  8. MongoDB命令及SQL语法对比

    mongodb与mysql命令对比 传统的关系数据库一般由数据库(database).表(table).记录(record)三个层次概念组成,MongoDB是由数据库(database).集合(col ...

  9. RMQ 数据结构

    RMQ 常用的数据结构之一 直接上代码 马克好来 是个好板子 #include <stdio.h> #define min(a,b) a<b ? a : b ],d[][]; voi ...

  10. Odoo Graph 指定默认 类型

    <graph string='Sale Paid Grapg' type="pivot"> <field name='section_id' type=" ...