rem

rem就是root element的简写(html就是根元素),默认情况下html字体大小是16px,1rem=html的字体大小就是16px

移动端的产品形态分为两种

• 1.一种对于布局简单,内容少的网站,大部分pc和移动公用一套,比如摩拜就是用媒体查询就是做了一套pc和移动端的网页
• 2.对于像淘宝,还有一种产品形态,就是内容比较多的,布局比较复杂的,就是pc和移动分离的,那对于纯粹的移动端,屏幕大小也不一样,我们单用媒体查询,就会比较复杂,需要写大量的代码。

总结

如果有一个值可以是动态的,我们随着屏幕大小的改变,改变一个值,就让页面中所有的css样式发生变化,这样我们工作量就会大大减小,也会比较方便.而rem刚好就是一个动态的值,它的参照物就是html根元素,我们可以这样做,可以按照设计稿的尺寸大小去写一套样式,然后我们随着屏幕大小的改变,改变根元素html字体的大小.就能改变下面的样式

为了好计算

• 为了好计算,我们不用默认的16px大小,都用100px
• 公式:屏幕的宽度/设计稿的尺寸宽度=?/100
• 随着屏幕大小应该得到的html字体大小=屏幕的宽度/设计稿的尺寸宽度*100

来段js

function refreshRem() {        var desW = 640,            winW = document.documentElement.clientWidth(移动端兼容处理)||document.body.clientWidth(pc端兼容处理);            ratio = winW / desW;        document.documentElement.style.fontSize = ratio * 100 + 'px';    }    refreshRem();    window.addEventListener('resize', refreshRem);复制代码