响应式布局的原理是什么?
时间：2024-02-14 05:40:02 | 来源：网站运营
时间：2024-02-14 05:40:02 来源：网站运营
响应式布局的原理是什么?：首先你要正确理解什么是响应式，然后找出所有可以实现响应式的方法，正确理解每一种响应式方法，并且在合适的场景使用合适的方法。最后去探索每个方法的原理。
什么是响应式
响应式就是为了可以使用一套代码实现多端显示，比如电脑端，移动端，并且可以适应不同尺寸的屏幕大小。
常见的响应式实现方法
百分比布局
vh/vw 布局
flex布局
rem布局
媒体查询
对于这些布局的使用方法通过搜索引擎就可以获得结果。需要注意的是应该尽量少的使用媒体查询，也就是说，媒体查询是我们最后才应该考虑的解决方法。
原理
这里介绍一下 rem 布局的原理，我们知道 rem 作为单位，显示的大小总是由根元素 html 节点的字体大小决定的，它的原理很简单，代码实现如下。
```JavaScript
// 原始配置
function setRem () {
let doc = document.documentElement
let width = doc.getBoundingClientRect().width
let rem = width / 75
doc.style.fontSize = rem + 'px'
}
// 监听窗口变化
addEventListener("resize", setRem);
```
在线咨询
