rem布局的原理
rem布局是一种主要应用于移动端的布局，它的特点是：在屏幕分辨率变化时，整个网页中的每个元素包括margin和padding都会进行等比缩放，放大或缩小。每个元素的宽度，高度进行类似的百分比定义。
进行rem布局有两种方法，一种是通过js，用js来获取rem的数值，另一种则是通过css来实现，因为在逆战班目前学习的大部分是css，所以侧重说一下css样式中如何使用rem布局。
正常一般的网页中使用rem布局第二种方法的话，就必须引用一个特别重要的元素，那就是vw，vw是一个单位单位长度，一般为了方便去计算长宽，我们定义100px=26.666667rem，这段话要写在html的样式中，以来表示html中“font-size”的大小。注意！在写完这个样式之后，一定要在之后有文字文本的标签样式中重置字体的小，否则的话将会出现所有的字体大小都继承html的字体大小，导致文本字体大小非常大。
在定义完vw的尺寸之后就可以去进行网页标签样式的布局了，在写布局样式的时候，只要把相应的px数值换算成rem写到样式中，就可以达到这种效果，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head><style>
html{font-size: 26.666667vw;}
body{font-size: 0.16rem;}
#main{width: 1rem;height: 1rem;background: red ;}
</style>
<body>
<div id="main"></div>
</body>
</html>
这样就可以实现一个宽高都为100px的红色方块了，而且当屏幕分辨率发生变化的时候，这个红色方块也会根据屏幕分辨率的变化就行等比的缩放。
以上就是我对rem布局的理解。
494
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
