H5手机端开发制作之新单位rem说明文档

1、制作人：林江涛技术部2016/02/26以需求来介入以需求来介入：都知道现在手机屏幕分辨率越来越多了，假设我们的网页需要适配的iPhone4（320px），iPhone6(375px)，iPhone6 Plus(414px)。我们的需求是，当用户浏览网页时，根据屏幕的尺寸，来向用户展示更适合用户的文字、图片、按钮大小。（1）iPhone4的时候，希望网页的内容文字大小12px=12*（320/320）px，按钮的大小是240px。（2）Iphone6的时候，希望网页的内容文字大小14px=12*（375/320）px，按钮的大小是280px，等比缩放。（3）Iphone6 Plus的时候，希望

2、网页的内容文字大小15.5px=12*（414/320）px，按钮的大小是310px，等比缩放。以前的做法以前的做法在rem概念没引入前我们的做法是，以最小的屏幕（iPhone）做一版数据出来，然后通过js去控制viewport 的 initial-scale （网页缩放比例）。如：iPhone4下： 那么对应的到了iPhone6需要调整缩放比例 initial-scale=375/320 =1.18 同理到了iPhone6 Plus对应的应该是 initial-scale=414/320 =1.30 早期【天猫】移动端也是用用这样的方法实现的。能满足我们的需求。缺点是：这样做会使得，因为in

3、itial-scale越来越大，相当于拉伸网页，而使得在大屏幕的移动端设备下，文字、图片会变模糊。rem做法做法现在【天猫】的做法就是用rem来做。rem（font size of the root element）是指相对于根元素的字体大小的单位（可以联想一下em）。也就是比如我定义：html font-size:14px 那么如引用.test-box font-size/width/height 设为2rem的话就相当于 2*14px。也就是.test-box font-size:2rem; /*font-size:28px;*/ /*2*14px/ 我们可以理解为，一旦根节点html 定

4、义的 font-size 变化，那么整个网页中运用到 rem的也会变化。iPhone4下的效果。下的效果。iPhone6下下的效果。的效果。iPhone6plus下下的效果。的效果。具体大家可以去看【淘宝】的移动端页面的案例。参考网址：http:/ lib-flexible是什么？是什么？lib-flexible是一个制作H5适配的开源库使用方法：头部引用这两个文件即可。 文件下载地址：https:/ ，也就是1rem=75px 。这样在写代码的时候width=75px就可以写成width=1rem 。接下来你肯定要问我 ，那么每一个像素单位换算成rem岂不是每一个都要用计算器计算出来 ，开玩

5、笑 ，我怎么会给你这个机会 。下面给大家介绍一款自动计算rem的插件 ，超级好用！（1）下载安装Sublime Text3.这里我已经装好了Sublime Text 3.rar ，位置在贺喜来共享软件 ，解压压缩包后直接打开sublime_text.exe这个文件就可以用 。（2）安装关键插件cssrem-master ，压缩包里我已经装好了。如果没装的话就去这个地址下载https:/ 下载完以后解压压缩包将cssrem-master这个文件夹放在 这个文件下面就可以了。（3）配置cssrem.sublime-settings文件。首先，打开sumlime_text ，新建一个css文件 ，这

6、时候插件已经可以用了 ，按一下tab键自动会将px转换为rem 。接下来将这个文件拖到软件中 ，打开后是这样子的 “px_to_rem”: 75, /这个75就是你转换的比例 “max_rem_fraction_length”: 6, /这里是转换后小数点后的位数 ，建议为2 “available_file_types”: “.css”, “.less”, “.sass” /此处不用动配置完此文件保存关掉软件重启就可以用了。注意：自动换算单位必须在css文件里才有效 ，直接在html中写样式是没有用的 ！所有的单位都可以用rem来写 ，比如width ，height ，line-height

7、,margin ,padding等等 ，只有font-size不建议用rem 。我们不希望文本在不希望文本在Retina屏幕下变小屏幕下变小，另外，我们希望在大屏手机上看到更希望在大屏手机上看到更多文本多文本，以及，现在绝大多数的字体文件都自带一些点阵尺寸，通常是16px和24px，所以我们不希望出现不希望出现13px和和15px这样的奇葩尺寸这样的奇葩尺寸。如此一来，就决定了在制作H5的页面中，rem并不适合用到段落文本上。所以在Flexible整个适配方案中，考虑文本还是使用px作为单位。只不过使用data-dpr属性来区分不同dpr下的文本字号大小。因此 ，css中所有带font-size的样式都应该这样来写div width: 1rem; heigh