响应式处理-一篇打尽

news2024/10/7 8:27:58

纯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)