<script type="text/javascript">
// 获取像素比值
var num = 1 / window.devicePixelRatio;
//根据像素比值生成视口标签---有问题--字体在移动端大小不同
// document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale='+num+', maximum-scale='+num+', minimum-scale='+num+'">');
//获取屏幕十分之一的宽度
var fontSize = document.documentElement.clientWidth / 10;
//设置字体
document.getElementsByTagName("html")[0].style.fontSize = fontSize + 'px';
</script>javascript
这时1rem = fontSize;你的设计稿宽是750px;上面的一个图标宽是75px;在设计稿中它占十分之一。也就是在任何显示器下都占十分之一。这样就刻意作到兼容了。图标的宽应该是75/75 rem;(为何是除以75,由于fontSize取的是十分之一)。这里实际宽度/设计稿十分之一的宽度的比值是固定的。可是rem是根据设备视口变化的,因此用这个来兼容各个设备。html
在这里为何是屏幕的十分之一呢,其实不是特别固定,除以11,12,8,9都行,是用来兼容iPhone4的屏幕的。java
下面这种也能够字体
<script>
function Rem() {
var docEl = document.documentElement,
oSize = docEl.clientWidth / 7.2;
console.log(docEl.clientWidth);
console.log(oSize);
if (oSize > 100) {
oSize = 100;
console.log("oSize");
}
docEl.style.fontSize = oSize + 'px';
return oSize;
}
window.addEventListener('resize', Rem, false);
Rem();
</script>scala