rem相对相对于浏览器的根元素html大小影响 默认1rem=16px ;需写js文件,比较麻烦
根元素等于=假设设计稿根元素大小100*(设备的宽度/750设计稿)
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
//js获取当前的设备大小:document.documentElement.clientWidth;
var clientWidth = docEl.clientWidth;//获取设备的宽度
if (!clientWidth) return;
if (clientWidth >= 750) {//宽度>750 平板 或桌面
docEl.style.fontSize = '100px';//根元素
} else {//移动端的适配
//设置:html根元素大小 100设计稿的html大小 750设计稿(根据设计稿变化)
//测试设计稿大小:测量的值px px转rem 测量的px/100=?rem 直接css里面写?rem
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
vw表示的是屏幕宽的1%,屏幕宽是100vw,设计稿为750px时,1px为0.13333vw;
所以可以在html中写
html{font-size:13.33333333vw}
//防止字体过大
@media (min-width: 750px) {
html {
font-size: 100px;
}
}
在写入rem时候 实际的像素 直接除100 就等于对应的rem。比如1rem等于设计稿的100px,这样,rem与vw相结合,非常滴房便
备忘录:
px:相对大小 相对于浏览器的分辨率
em: 相对大小 相对于当前的元素设置大小,如果当前的元素没有大小找父元素 受父元素影响