前端页面的适配使用rem换算

大名鼎鼎的Flexible

原理:flexible.js正是利用rem单位相对根元素<html>的font-size来做计算,而我们需要做的就是根据不同的屏幕算出html的font-size,而页面内的大小单位都根据rem来写,从而实现了自适应

引入: 直接引用阿里的CDN文件(或下载到本地引入)

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

假设拿到的设计稿和上述网易的一样都是750,Flexible会把设计稿分为10份,可以理解为页面width=10rem,即1rem=75px,所以根font-size(基准值)=75px。

之后的css换算rem公式为:

px/75=rem,所以100px=100/75=1.33rem,50px=50/75=0.66rem

猜你喜欢

转载自blog.csdn.net/lbPro0412/article/details/81705012