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

2017年07月22日 16:01:24 Pwcong 阅读数：18872

前话

好久没写教程了（可能会误导新手的菜鸟教程(￣▽￣)”）。

这是我的github，欢迎前端大大们和我一起学习交流
https://github.com/pwcong

最近入职公司做前端实习，这几个星期来学到了移动端H5页面适配。（以前根本没做过移动端网页/(ㄒoㄒ)/~~，还是微信端的）

所以把我学到的一个小知识点写下来，也分享给前端新手们。

正文

0x00 大概说明

做移动端网页和pc端很大不同的便是现在移动端窗口分辨率繁多。

很多时候UI给的设计图只有一份，还是按照iphone6设计的，这就让前端适配其他例如6plus或安卓等其他移动端头疼。

还好，阿里巴巴2015年底公开了其成熟的适配方案，lib-flexible，至于其可靠性可参考每年天猫活动的移动端页面。

这个方案的用法大概是这样的，HTML 头部引入 lib-flexible 的样式和js库，容器或组件宽高主要使用单位 rem ，字体大小则不变仍然使用单位 px。

还有一个约束是，因为只面向移动端，因此我们限制最外层包裹的div最大宽度为 640px

我这里只简单介绍怎么使用 lib-flexible 实现移动端适配，如果需要深入解释的知识，请阅读如下文章：
https://github.com/amfe/article/issues/17

0x01 引入 lib-flexible

最新的库文件可以到这里下载：
https://github.com/amfe/lib-flexible

clone 下来后在 build 目录下找到 flexible.css 和 flexible.js 在HTML头部引入即可，例如：

<!DOCTYPE html>

<html lang="zh-CN">

    <head>

        <title>lib-flexible demo</title>

        <meta charset="UTF-8">

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

        ...

        <link href="css/flexible.css" rel="stylesheet">

        <script src="js/flexible.js"></script>

    </head>

    <body>

        ...

    </body>

</html>

0x02 计算`rem`值

谷歌 rem 的用法后很多人应该大概了解 rem 的原理了，大概就是 rem 依赖 font-size 的值，例如默认下 1rem = 16px，因此通过在不同分辨率修改 font-size 就可以达到适配不同分辨率的移动端了。

需要详细了解 rem 值计算可参考这篇文章 http://www.cnblogs.com/azhai-biubiubiu/p/6003597.html

rem 来做宽高定型有个最大的问题是，font-size 如何计算的问题，如何算得的 font-size 可以在不同分辨率下显示效果一致呢？

不用担心，lib-flexible 已经帮你算好了，在你调整窗口大小的时候自动计算调整 rem 的基准，你只要做的是，按照设计图算出能适配不同分辨率的移动端的 rem 值。

这里有个关系图：

看不懂没关系，看那么多flexible的教程都放了我也就跟着放出来好了。

假如UI给了这个设计图（找不到工作的UI (/▽＼)）：

好，我这辣鸡一眼看出了：

这是以iphone5为标准的ui设计稿，设备窗口宽度为 640px
中间一个色块，居中，背景色为 #0075a9，margin-top 为 100px， width 为 240px，height 为 120px

接下来，我们来计算rem值，计算公式很简单：

需转换的px值 / 设计稿宽度px值 * 10

上面的尺寸计算一下转换成下面的说法：
1. 这是以iphone5为标准的ui设计稿，设备窗口宽度为 10rem
2. 中间一个色块，居中，背景色为 #0075a9，margin-top 为 1.5625rem， width 为 3.75rem，height 为 1.875rem

0x03 按照找不到工作的UI给的设计稿敲出代码

<!DOCTYPE html>

<html lang="en">

<head>

    <title></title>

    <meta charset="UTF-8">

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

    <link href="css/flexible.css" rel="stylesheet">

    <script src="js/flexible.js"></script>

    <style>

        html, body{

            width: 100%;

            height: 100%;

            position: relative;

            padding: 0;

            margin: 0;

            overflow: hidden;

        }

        body{

            background: #333;

        }

        .container{

            overflow-x: hidden;

            overflow-y: auto;

            position: relative;

            height: 100%;

            max-width: 640px;

            background-color: white;

            margin: 0 auto;

        }

        .block{

            margin: 0 auto;

            margin-top: 1.5625rem;

            width: 3.75rem;

            height: 1.875rem;

            background-color: #0075a9;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="block"></div>

    </div>

</body>

</html>

0x04 不同分辨率移动端下浏览效果

可以看到，在多个不同设备间，效果基本差不多

后话

也许你会说，我这个案例内容太少，没有什么说服力。

那么，大佬们快动起手来，在你的移动端网页项目中用上 lib-flexible 看看能否解决移动端页面适配问题吧。

移动端rem计算的更多相关文章

关于移动端rem适配
var num = 1 / window.devicePixelRatio; var fontSize = document.documentElement.clientWidth / 10; doc ...
第130天：移动端-rem布局
一.关于布局方案当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于 ...
一个因为系统字号设置导致的rem计算渲染异常问题
测试同学突然拿着一部手机过来说,H5渲染各个元素都变大了,有些元素撑出了屏幕外面. 本来以为是某个Webview的渲染兼容问题,结果发现所有的浏览器都这样. 莫名其妙,隐约感觉是 rem计算出了问题, ...
H5 端 rem 适配方案与 viewport 适配
H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目 ...
谈谈我的移动端rem适配方案
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...
07. 如何实现移动端rem适配
如何实现移动端rem适配 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
移动端REM布局模板(阿里高清方案)
移动端REM布局模板(阿里高清方案),蛮好的,转自: http://www.jianshu.com/p/985d26b40199 . <!DOCTYPE html> <html la ...
移动端Rem布局注意事项
1.布局的总体结构框架: 2.注意事项: (a):如果是左右两栏的布局方式,须在article的同级加一个aside: 因为是同级,所以必须设置同样的样式:而且他俩的父级,也就是sectio ...
移动端rem适应布局
移动端rem适应布局 rem rem(root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素(html)设置font-s ...

随机推荐

CentOS7更改运行级别
Step 1:查看系统默认运行级别 [root@node-1 html]# systemctl get-default //图形界面graphical.target [root@node- ...
IDEA中添加javap反编译
TZOJ 5694 区间和II(树状数组区间加区间和)
描述给定n个整数,有两个操作: (1)给某个区间中的每个数增加一个值: (2)查询某个区间的和. 输入第一行包括两个正整数n和q(1<=n, q<=100000),分别为序列的长度和操 ...
Codeforces Round #553 (Div. 2) B题
题目网址:http://codeforces.com/contest/1151/problem/B 题目大意:给定一个n*m的矩阵,问是否可以从每一行中选择一个数,使得这n个数异或大于0,如果可以还要 ...
ListBox设置背景色无效的问题。 listview类似
<Style TargetType="{x:Type ListBoxItem}"> <Setter Property="Template"&g ...
WebSocket 实现链接发送消息
Websocket 原理浅析地址: https://www.cnblogs.com/yuanyongqiang/articles/10457793.html 直接上代码: myWebSocket.py ...
十、JAVA面试简答
2.ASCII编码表的常识 3.&和&&,|和||的区别下面我们就分成三组对问题进行分析:分别是&和&&,|和||及~和!. 1.&是按位与操 ...
Git多账号配置，同一电脑多个ssh-key的管理
为什么有这种需求? 在我们开发过程中,可能会遇到使用同一台机器,既要向公司git服务器提交代码,也要向gitlib或者gitee等 git仓库提交代码,2个仓库设置的用户名信息,不一样,此时需要用到多 ...
安装CentOS 7 的yum 到 Radhat 7上，使其可以获取资源
镜像资源: 1. http://mirrors.163.com/ 2. https://opsx.alibaba.com/mirror 从上列镜像资源下载如下rpm软件包 -rw-r--r--. 1 ...
python基础 (初识函数&函数进阶)
函数基础部分 .什么是函数? 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率. 2.定义函数定义:def 关键词开头,空格之后接函数名 ...

移动端rem计算