rem从去年的手淘双11开始火起来之后一直就想去使用,但是苦于学习途径有限,工作任务也比较繁忙导致一度延后。那么现在对相关知识的学习与初步的项目实践之后,在这里记录一下使用rem解决各屏幕适配问题。废话不多说~~一步步来 首先是从设计师那边拿过来的设计稿可能是640,或是75 ...
rem从去年的手淘双11开始火起来之后一直就想去使用,但是苦于学习途径有限,工作任务也比较繁忙导致一度延后。
那么现在对相关知识的学习与初步的项目实践之后,在这里记录一下使用rem解决各屏幕适配问题。废话不多说~~一步步来
首先是从设计师那边拿过来的设计稿可能是640,或是750的,这些都不重要。
然后我们要引用一个JS,adaptive.js
github地址:https://github.com/finance-sh/adaptive,
至于这个JS主要用来动态计算相对不同的屏幕大小设置html的font-size的值,当然还有一点儿其他的,自己去了解哈。
接下来看这个
// 设计图宽度 window['adaptive'].desinWidth = 750; // body 字体大小 会将body字体大小设置为 baseFont / 100 + 'rem' window['adaptive'].baseFont = 28; /* // 显示最大宽度 可选 window['adaptive'].maxWidth = 480; // rem值改变后执行方法 可选
开始根据PSD在JS里进行配置,我把这一块的配置直接放到JS文件里了,加载完就可以执行,实际项目中如下:
设置完了之后我们把基数(制作页面的时候一个参考项)定为100培训(别问为什么,因为个人觉得好用)。
实际“堆砖”过程当中是这个样子的。设计稿上我们看到一个div,用以前的写法假设是这样
div{
width:200px;
height:150px;
margin:44px auto;
padding:0 10px;
}
那么你现在需要这样写
div{
width:2rem;
height:1.5rem;
margin: .44rem auto;
padding:0 .1rem;
}
写完了,就这样就可以了,那你本来的px值除以100,就是你要的rem的值。
针对1px的border问题,直接写1px就好了,因为就算你在缩小也小不过1px。
好了别看了,赶紧拿个设计稿来玩玩,再测一下不同的设备显示情况。
有些坑可能没踩到,等我踩到了再及时更新哈。
有涵养的人都会带上出处。。。。。
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:完整的REM布局的工作流程与规范
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。