知识点:
rem是什么?
rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖根元素(rem)一个是依赖父元素计算(em)。
个人理解rem布局可分为俩种情况无设计稿和有设计稿:
无设计稿
1、首先需要在<head>标签中加入
<meta name="viewport" content="width=device-width,initial-scale=1.0,maixmum-scale=1.0,minimum-scale=1.0,user-scalable=no">
对于viewport的详细解释可以参考这篇文章:https://www.cnblogs.com/2050/p/3877280.html
2、在<script>标签中加入
window.onresize = function(){
document.documentElement.style.fontSize = document.documentElement.offsetWidth / 20 +'px';
}
/*
document.documentElement.style.fontSize 是得到<html>标签并为它设置font-size样式字体大小,因为REM计算的规则是依赖根元素也就是<html>元素的字体大小
document.documentElement.offsetWidth 是获取整个视口的宽度
*/
document.documentElement.offsetWidth / 20 这里的20不是固定的,这里 / 20 是把屏幕均分为20份,当然也可使用16、18... , 但是这里有一个问题就是Chorme浏览器字体最小只能为12px,所以这里的最后结果(document.documentElement.offsetWidth / 20 = ?)最好别小于12。
3、尝试让一个div不管在什么屏幕下都占据一半,这里使用20均分所以这里div宽度只需要定位10rem就可以在任何屏幕下都占据一半。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无设计稿rem</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maixmum-scale=1.0,user-scalable=no">
<style>
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
</style>
</head>
<body>
<div style="width:10rem;height:100%;background:#f22;">div</div>
<script>
window.onresize = getRem;
function getRem(){
document.documentElement.style.fontSize = document.documentElement.offsetWidth / 20+'px';
}
getRem();
</script>
</body>
</html>
有计稿
以 iPhone5 和 iPhone7 举例他们的屏幕分辨率是320px*568px,375px*667px
视觉设计师给的平面稿一般是 640px , 750px 宽度的设计稿
为什么设计稿会屏幕比例的俩倍呢?
这里引出一个知识点:
dpr是什么?
window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是:window.devicePixelRatio = 物理像素 / dips
物理像素,比较好理解,一个物理像素是显示器(手机屏幕)上最小的物理显示单元,在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值。
dips,(dip或dp或device independent pixels)指的是设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的
详细解释:https://www.cnblogs.com/mtl-key/p/7126634.html
简单的讲其实就是dpr决定了css 1px 等于多少屏幕物理像素。
拿 iPhone6 和 普通PC机 举例:
iPhone6的dpr等于2,也就是说如果你为一个div设置100px(这里100px是css像素)宽度,在iPhone6 屏幕上面div其实占据了200px物理像素(因为iPhone 6 下 dpr=2)。而在普通pc屏幕下这个div占据的刚好是100px(因为pc屏幕下dpr=1)
可以在Chorme移动端DEBUG下开启显示dpr,也可以在console中打印window.devicePixelRatio
查看
设计稿给的是 640px 的如下:
实现rem布局:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有设计稿rem</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maixmum-scale=1.0,user-scalable=no">
<style>
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
</style>
</head>
<body>
<div style="position:absolute;left:.94rem;top:1.63rem;width:1rem;height:1rem;background:#f00;"></div>
<div style="position:absolute;right:.94rem;top:1.63rem;width:1rem;height:1rem;background:#f00;"></div>
<div style="position:absolute;left:2.7rem;top:3.38rem;width:1rem;height:1rem;background:#00f;"></div>
<script>
window.onresize = getRem;
function getRem(){
document.documentElement.style.fontSize = document.documentElement.offsetWidth / 6.4+'px';
}
getRem();
</script>
</body>
</html>
在任何设备下这三个div都会和设计稿一样的布局展现。
document.documentElement.offsetWidth / 6.4
这里 / 6.4是为了方便计算,当然 / 80,/ 50...都行 , 前面提到过
有一个问题就是Chorme浏览器字体最小只能为12px,所以这里的最后结果最好别小于12。
所以这里让设计稿宽度 / 100 之后
document.documentElement.offsetWidth / ( 640 / 100)
<div style="position:absolute;left:.94rem;top:1.63rem;width:1rem;height:1rem;background:#f00;"></div>
<div style="position:absolute;right:.94rem;top:1.63rem;width:1rem;height:1rem;background:#f00;"></div>
<div style="position:absolute;left:2.7rem;top:3.38rem;width:1rem;height:1rem;background:#00f;"></div>
div的单位只要跟随 / 100 就行了,因为 / 100 很好计算所以无需计算直接就能得出想要的rem大小。
相关问题:
使用rem后行内元素间的间距很大怎么办?
作者:D_R_M
链接:https://www.jianshu.com/p/691a569f7fe1
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。