在响应式布局逐渐成为主流的今天，网页或者app的流式布局已经不算是一个新鲜的词汇了。今天我要讲的一个内容也是跟页面流式布局有关，如何让你的网页实现完美的缩放?
可以使用相对单位和百分比来实现样式随页面缩放而缩放。
1. 相对单位
在样式中使用相对单位，如em、rem、vw、vh等，这些单位都是相对于根元素或视口大小的单位，随着页面缩放而缩放。
例如，设置元素的宽度为50%，高度为5em：
```
div {
width: 50%;
height: 5em;
}
```
当页面缩放时，元素的宽度和高度也会随之缩放。
2. 百分比
使用百分比也可以实现样式随页面缩放而缩放。例如，设置元素的宽度为50%，高度为10%：
```
div {
width: 50%;
height: 10%;
}
```
当页面缩放时，元素的宽度和高度也会随之缩放。
需要注意的是，使用百分比定位元素时，需要将父元素的宽度和高度设置为100%，这样才能保证子元素的百分比定位正确。例如，设置子元素在父元素中居中：
```
.parent {
position: relative;
width: 100%;
height: 100%;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
以上代码中，父元素的宽度和高度都被设置为100%，子元素的top和left属性使用了百分比定位，在子元素中使用了transform属性将其居中。当页面缩放时，子元素的位置也会随之缩放。
