纯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 50pxdocEL.style.fontSize = (clientWidth / 750) * 100 + "px";}}recalc();win.addEventListener(resizeEvent, recalc, false);doc.addEventListener("DOMContentLoaded", recalc, false)})(document, window)
