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

H5手机端开发制作之新单位rem说明文档;1.为什么放弃使用百分比转而使用css3的rem新单位？;以前的做法 在rem概念没引入前我们的做法是，以最小的屏幕（iPhone）做一版数据出来，然后通过js去控制viewport 的 initial-scale （网页缩放比例）。如：iPhone4下：meta name=viewport content=width=device-width, user-scalable=no, initial-scale=1.0 / 那么对应的到了iPhone6需要调整缩放比例 initial-scale=375/320 =1.18meta name=viewport content=width=device-width, user-scalable=no, initial-scale=1.18 / 同理到了iPhone6 Plus对应的应该是 initial-scale=414/320 =1.30meta name=viewport content=width=device-width, user-scalable=no, initial-scale=3.0 / 早期【天猫】移动端也是用用这样的方法实现的。能满足我们的需求。缺点是：这样做会使得，因为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都有相应的变大调整。;具体大家可以去看【淘宝】的移动端页面的案例。 参考网址：/mobile/lib-flexible-for-html5-layout.html?from=timelineisappinstalled=0;2.那么该如何使用rem？;3.那么有一个问题，单位如何换算？;先看一下效果;4.插件安装方法;按一下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; height: 0.4rem; font-size: 12px; // 默认写上dpr为1的fontSize } [data-dpr=2] div { font-size: 24px; } [data-dpr=3] div { font-size: 36px; } ;谢谢观看！