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

大名鼎鼎的Flexible

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

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

假设拿到的设计稿和上述网易的一样都是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

 

 

 

你可能感兴趣的:(rem)