屏幕适配一直是困扰工程师的重要课题,各种解决方案层出不穷,百分比布局、响应式设计(媒体查询)、媒体查询与rem结合等方案都各有所长,综合而言,媒体查询与rem、Javascript配合使用的方案最优,但是将px转换为rem需要不停的计算,对一个大型项目会有很多的样式代码,转换的工作量是巨大,有没有一种自动化的解决方案呢?
Hublider提供了解决方法:可在工具>>选项或右键项目>>属性下的代码助手设置中配置。参阅http://ask.dcloud.net.cn/article/982
开发实践中经历了从最初的PC固定布局、手机端固定布局(两端留白)到响应式设计(媒体查询、百分比布局等),直到最终选择rem+Javascript的模式,但是在项目开发中需要将大量的样式由px转换为rem,单位之间的换算虽然不复杂,但是工作量却很大。
这里的参数选择和你在项目中的设计图尺寸和根元素字体大小相关,至于border的处理是因为在安卓下使用rem单位的支持性特别差,你可能写2rem或者3rem都没用默认会变成1px,所以在使用border属性时很多时候不建议处理border。
Javascript控制根元素大小的代码如下图所示,读者可以将代码放在公共的Js文件中,确保每个HTML文件都引用到。

纯牛奶645
- 发布:2016-11-14 11:32
- 更新:2016-11-14 11:32
- 阅读:5494
Hublider中如何将px转换为rem
分类:HBuilder
2 个评论
要回复文章请先登录或注册
付楚
5***@qq.com