移动进阶之高效开发

最新推荐文章于 2024-09-18 09:47:26 发布

bubbleJessica

最新推荐文章于 2024-09-18 09:47:26 发布

阅读量143

点赞数

分类专栏：移动端文章标签： html css 前端

本文链接：https://blog.csdn.net/bubbleJessica/article/details/129250814

版权

移动端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了响应式布局的核心技术——媒体查询，包括不同设备像素比和屏幕尺寸的处理。同时，展示了如何使用CSSGrid实现灵活的网格系统，并通过实例演示了圣杯布局的实现，探讨了在不同屏幕尺寸下优化网页布局的方法。

摘要由CSDN通过智能技术生成

响应式布局

媒体查询的语法

/* 4.媒体特性 */
      /* width / max-width / min-width */
      /* -webkit-device-pixel-ratio / -webkit-max-device-pixel-ratio / -webkit-min-pixel-ratio */
      /* orientation: landscape / portrait */
      /* @media screen and (min-width: 320px) {
        body {
          background-color: red;
        }
      } */

      /* @media screen and (width: 320px) {
        body {
          background-color: red;
        }
      } */

      /* dpr <= 2 且屏幕水平方向 */
      @media (-webkit-max-device-pixel-ratio: 2) and (orientation: landscape) {
        body {
          background-color: red;
        }
      }

获取像素比

// 获取 dpr
    console.log(window.devicePixelRatio);

媒体查询(断点)不能实时显示但是性能好宽高等比例缩放

按钮点击显示/隐藏

<!-- 导航 -->
        <nav id="nav" class="nav-layout">
          <ul class="nav-list">
            <li>
              <a href="./index.html" class="nav-link">首页</a>
            </li>
            <li>
              <a href="javascript:;" class="nav-link">免费课程</a>
            </li>
            <li>
              <a href="javascript:;" class="nav-link">实战课程&amp;金职位</a>
            </li>
            <li><a href="javascript:;" class="nav-link">专栏/手记/猿问</a></li>
            <li><a href="javascript:;" class="nav-link">慕课教程</a></li>
          </ul>
        </nav>

<script>
      // 点击切换按钮，展开或收起导航菜单
      {
        const $toggleBtn = document.getElementById('header-toggle');
        const $nav = document.getElementById('nav');
        const navExtendedClassName = 'nav-layout-extended';
        const toggleBtnExtendedClassName = 'header-toggle-active';

        $toggleBtn.addEventListener(
          'click',
          function () {
            // 判断有就移除样式 没有就添加样式
            this.classList.toggle(toggleBtnExtendedClassName);
            $nav.classList.toggle(navExtendedClassName);
          },
          false
        );
      }
    </script>

/* nav */
.nav-list {
  background-color: #fff;
}
.nav-link {
  display: block;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  color: #363636;
  font-size: 14px;
  font-weight: bold;
}
.nav-link:hover {
  color: #1428a0;
}

.nav-layout {
  overflow: hidden;
  position: absolute;
  top: 48px;
  left: 0;
  width: 100%;
  height: 0;/*因为高度为0 不显示设置溢出隐藏*/
  /* background-color: #fff; */
  transition: height 0.5s;
}
.nav-layout-extended {
  height: 200px;
}

移动端媒体查询策略从小到大

/* 576px 768px 992px 1200px */
.course-item {
  width: 100%;
}
@media (min-width: 576px) {
  .course-item {
    width: 50%;
  }
}
@media (min-width: 768px) {
  .course-item {
    width: 33.333333%;
  }
  .header-toggle {
    display: none;
  }
  .nav-layout {
    /* 改为默认样式即可 不需要绝对定位 */
    position: static;
    height: auto;
  }
  .nav-list {
    display: flex;
    /* 从右往左排列 */
    justify-content: flex-end;
  }
}
@media (min-width: 992px) {
  .course-item {
    width: 25%;
  }
}
@media (min-width: 1200px) {
  .course-item {
    width: 16.666667%;
  }
}

Grid网格布局

Grid容器的属性

grid-template-rows 定义每一行的行高(可以给网格线起名字)：[r1] 150px [r2] 150px [r3] 150px [r4] 150px

grid-template-columns 定义每一列的列宽(可以给网格线起名字)：[c1] 150px [c2] 150px [c3] 150px [c4] 150px

上面2个属性取值可以是：百分比 fr份数(片段) auto(先于fr计算，获取必要的最小空间) repeat(4,25%) minmax(150px,300px)

grid-auto-flow: row/column 先填满第一行再填满第二行

grid-auto-rows 定义浏览器自动创建的多余空格的行高

grid-auto-columns 定义浏览器自动创建的多余空格的列宽

gap/row-gap/column-grap 行/列间距

grid-template-areas 定义区域（可以给每个区域的起始网格线命名区域名-start 终止网格线命名区域名-end）

align-items 垂直对齐 justify-items 水平对齐 place-items 前两者的合并

属性值可以是 start对齐单元格的起始边缘 end对齐单元格的结束边缘 (项目不一定总是铺满单元格)

align-content 设置整个内容区域的垂直位置（上中下）start end center

justify-content 设置整个内容区域的水平位置（左中右）start end center

属性值space-around 每个项目的两侧间隔相等 space-between 项目与项目间隔相等 space-evenly 前2者结合体

Grid项目的属性

grid-column-start/end 从第几个网格线开始，到第几个网格线结束 number|name|span number

grid-row-start/end 从第几个网格线开始，到第几个网格线结束 number|name|span number

grid-area 指定项目放在哪个区域/位置区域名|左上角到右下角

align-self/justify-self/place-self针对单个项目

圣杯布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>圣杯布局</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      body {
        /* display: flex;
        flex-direction: column; */

        display: grid;
        grid-template-rows: 80px 1fr 80px;
        /* grid-template-columns: 100%; */
        grid-template-columns: 200px auto 200px;
        grid-template-areas:
          'header header header'
          'nav main sidebar'
          'footer footer footer';

        height: 100vh;

        font-size: 24px;
      }

      .header-layout,
      .footer-layout {
        height: 80px;
      }

      .header-layout {
        background-color: red;
        grid-area: header;
      }

      .footer-layout {
        background-color: yellow;
        grid-area: footer;
      }

      .body-layout {
        /* flex-grow: 1;

        display: flex; */
        display: grid;
        grid-template-columns: 200px auto 200px;
        grid-template-rows: 100%;
        grid-template-areas: 'nav main sidebar';
      }

      .main-layout {
        /* flex-grow: 1; */
        background-color: gray;
        grid-area: main;
      }
      .nav-layout {
        /* width: 200px; */
        background-color: green;

        /* grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2; */

        /* order: -1; */
        grid-area: nav;
      }
      .aside-layout {
        /* width: 200px; */
        background-color: lightblue;
        grid-area: sidebar;
      }

      /* 垂直水平居中 */
      /* .flex-center {
        display: flex;
        justify-content: center;
        align-items: center;
      } */
      .grid-center {
        display: grid;
        justify-items: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <header class="header-layout grid-center">头部</header>

    <!-- <div class="body-layout"> -->
    <main class="main-layout grid-center">主体部分</main>
    <nav class="nav-layout grid-center">导航</nav>
    <aside class="aside-layout grid-center">侧栏</aside>
    <!-- </div> -->

    <footer class="footer-layout grid-center">底部</footer>
  </body>
</html>