rem单位
rem是css中的一个尺寸单位,和px、%,em(相对于父元素的字体大小)单位一样都是设置大小
rem:html字体大小的多少倍
用法:
设置rem大小:
方式一
document.documentElement.style.fontSize=(document.documentElement.clientWidth/750)*100+'px';
方式二:
document.documentElement.style.fontSize='10vw';
即1rem等于屏幕宽度的10分之一,若宽为375px,则1rem=37.5px;
750px是当前流行美工稿大小;
所以根据用法可得:
保证在750px大小的设备当中,1 rem=100px;
在350px大小的设备中,1 rem=50px;
监听窗口改变设置rem
window.addEventlistener('resize',fn);
代码示例；
<html>
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0'>
<title></title>
<script src='js/underscore.js'></script>
<style>
div{
width:6rem;
height: 1rem;
background-color:orange;
}
</style>
</head>
<body>
<div></div>
<script>
//页面加载完毕后设置html字体大小
window.onload=function()
{
//获取标准rem单位
document.documentElement.style.fontSize=(document.documentElement.clientWidth/750)*100+'px';
}
</script>
</body>
</html>
1462
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
