移动端rem计算

时间 2019-11-24

标签移动 rem 计算栏目无线繁體版

原文原文链接

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

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

前话

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

这是个人github，欢迎前端大大们和我一块儿学习交流
https://github.com/pwcongcss

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

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

正文

0x00 大概说明

作移动端网页和pc端很大不一样的即是如今移动端窗口分辨率繁多。java

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

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

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

还有一个约束是，由于只面向移动端，所以咱们限制最外层包裹的div最大宽度为 640pxmarkdown

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

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 看看可否解决移动端页面适配问题吧。