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

H5手机端开发制作之新单位rem说明文档,制作人：林江涛 技术部 2016/02/26,1.为什么放弃使用百分比转而使用css3的rem新单位？,以需求来介入： 都知道现在手机屏幕分辨率越来越多了，假设我们的网页需要适配的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的时候，希望网页的内容文字大小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 早期【天猫】移动端也是用用这样的方法实现的。能满足我们的需求。 缺点是：这样做会使得，因为initial-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 定义的 font-size 变化，那么整个网页中运用到 rem的也会变化。,我们来看一下【淘宝】的实例： 先展示效果，可以看到页面上的文字、按钮、logo都有相应的变大调整。,iPhone4下的效果。,iPhone6下的效果。,iPhone6plus下的效果。,具体大家可以去看【淘宝】的移动端页面的案例。 参考网址：,2.那么该如何使用rem？,在整个手淘团队，有一个名叫lib-flexible的库，而这个库就是用来解决H5页面终端适配的。 lib-flexible是什么？ lib-flexible是一个制作H5适配的开源库 使用方法： 头部引用这两个文件即可。 文件下载地址：,3.那么有一个问题，单位如何换算？,打个比方： 如果你的PS设计图的尺寸宽度是750px（这里指的是有效可视区域，就算你旁边有几万像素的白边都跟这没关系。） 那么计算方法就是10rem（整个页面宽度就是10rem不管你设计图多宽）=750px ，也就是1rem=75px 。这样在写代码的时候width=75px就可以写成width=1rem 。 接下来你肯定要问我 ，那么每一个像素单位换算成rem岂不是每一个都要用计算器计算出来 ，开玩笑 ，我怎么会给你这个机会 。 下面给大家介绍一款自动计算rem的插件 ，超级好用！,先看一下效果,4.插件安装方法,（1）下载安装Sublime Text3.这里我已经装好了Sublime Text 3.rar ，位置在贺喜来共享软件 ，解压压缩包后直接 打开sublime_text.exe这个文件就可以用 。 （2）安装关键插件cssrem-master ，压缩包里我已经装好了。 如果没装的话就去这个地址下载 下载完以后解压压缩包将cssrem-master这个文件夹放在 这个文件下面就可以了。 （3）配置cssrem.sublime-settings文件。 首先，打开sumlime_text ，新建一个css文件 ，这时候插件已经可以用了 ，,按一下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 ,margin ,padding等等 ，只有font-size不建议用rem 。 我们不希望文本在Retina屏幕下变小，另外，我们希望在大屏手机上看到更多文本，以及，现在绝大多数的字体文件都自带一些点阵尺寸，通常是16px和24px，所以我们不希望出现13px和15px这样的奇葩尺寸。如此一来，就决定了在制作H5的页面中，rem并不适合用到段落文本上。所以在Flexible整个适配方案中，考虑文本还是使用px作为单位。只不过使用data-dpr属性来区分不同dpr下的文本字号大小。 因此 ，css中所有带font-size的样式都应该这样来写 div width: 1rem; heig