纯pc端响应式
pc端平常用到的响应式布局 大致就如下三种，当然也会有其他方法，欢迎评论区补充
- 将div height、width设置成100%
- flex布局
flex布局主要是将flex-wrap: wrap，
最后，你可以通过给子元素设置 flex 属性来控制它们的大小和扩展方式，flex 属性是 flex-grow, flex-shrink 和 flex-basis
- grid布局
Grid 布局即网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列
对于响应式页面可以由下面例子使用(配合媒体查询)
<!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>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<style>
.container{
width: 100%;
height: 100%;
box-sizing:border-box;
padding: 20px 40px;
display: grid;
align-items: start;
column-gap: 20px;
row-gap: 20px;
grid-template-columns: repeat(6, 1fr);
flex-wrap: wrap;
overflow-y: auto;
.item{
border: 1px solid black;
height: 220px;
min-width: 60px;
}
}
@media screen and (max-width: 1000px) {
.container{
grid-template-columns: repeat(5, 1fr);
}
}
</style>
</body>
</html>2.移动端h5兼容pc端
这个没有别的方法了，只有媒体查询写两套样式代码
h5移动端：
使用em和rem 相对单位，木墙项目大多使用第三方插件实现，但他们的原理其实是类似的：
引入javascript脚本来实现font-size很屏幕之间的计算 ，就是拿到视口的
宽度 根据比例设置相应的根元素字体 从而设置相对参数的基准
(function(doc, win) {
// 获取到html这个标签
let docEL = doc.documentElement;
let resizeEvent = "orientationchange" in window ? "orientationchange" : "resize",
recalc = function() {
// 获取到档期啊设备的宽度
const clientWidth = docEL.clientWidth;
if (!clientWidth) return;
if (clientWidth > 750) {
// 给html设置一个内联样式
docEL.style.fontSize = "100px";
} else {
// 逻辑：以iphone678 为标准 算出来font-size 50px
docEL.style.fontSize = (clientWidth / 750) * 100 + "px";
}
}
recalc();
win.addEventListener(resizeEvent, recalc, false);
doc.addEventListener("DOMContentLoaded", recalc, false)
})(document, window)
