Home > List of blog posts > 移动端布局rem+vw，grid布局

Blogger Information

Blog 13

fans 0

comment 0

visits 6867

Special Recommendation

More>

Related recommendations

移动端布局

rem+vw

如何运用响应式单位vw？

让我们先来看下下面我们熟悉的这段代码。
```
<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Document</title>
</head>
<body></body>
</html>
```
其中viewport" content="width=device-width, initial-scale=1.0这段代码我们再熟悉不过了，我们几乎每一个html页面的头部都会见到这段代码，那这段代码是干什么用的呢？我们来看下下面这张表格。来了解一下这三个名词的概念。

序号	属性	定义
1	DPR	设备像素比
2	布局视图：width	默认980px
3	视觉视图：device-width	移动设备的布局视图
4	initial-scale=1.0	理想试图=视觉试图

看了这个表格我们应该已经知道这段代码是什么意思了。那么我们要在手机视窗为375px的页面布局应该怎么额做呢？通常我们布局的话都会用一个固定的参考单位，也就是rem，而rem是根据html根字号来取的值，所以我们要先给rem设置一个值,如下。

<style>
      html {
        font-size: 100px;
      }
    </style>

但是这个100px设置出来的rem是一个固定的值，那么如何用到响应式布局里呢？很简单，只需要一个函数就可以实现calc()如下写成这样就可以了：

<style>
      html {
        font-size: calc(100vw / 3.75);
      }
    </style>

手机视窗的宽度为375px，屏幕宽度是100vw，那一个vw就是1%的375也就是3.75，那么100vw/3.75不就等于375/3.75=100嘛。这样写的好处大大滴，如果我们要适配其他的时候呢只要修改这个3.75就ok啦。
那么这些写完了，我们又遇到了一个问题，我们知道元素的字号是会继承与被继承的，我们给body里写个p标签就会出现以下的情况！

  <body>
    <p>hello word</p>
  </body>

p标签错误
我们看到了一个超级大的p标签沾满了整个屏幕！！！！！怎么办？？？
不要急，只需简单的一个代码就可以，如下我们再把body里的字号再设置一下不久ok了嘛

    <style>
      html {
        font-size: calc(100vw / 3.75);
      }
      body {
        font-size: 0.16rem;
      }
    </style>

p标签正常
这不就又正常了嘛。那么问题又来了，如果屏幕很小或者屏幕很大，该怎么办呢？总不能让它无限放大和缩小吧？也很简单，这里我们只需要用媒体查询给他个限制就可以了，上代码

      @media screen and (max-width: 320px) {
        html {
          font-size: 85px;
        }
      }
      @media screen and (min-width: 640px) {
        html {
          font-size: 170px;
        }
      }

grid布局

什么是grid布局？
1.grid布局又叫网格布局，顾名思义就是把容器划分成一个网格表，在其中布局。
我们来看下下方的这段代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>grid布局详解</title>
  <style>
    /* 初始化 */
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    .continer {
      width: 30em;
      height: 30em;
      background-color: wheat;
      /* 设为grid容器 */
      display: grid;
      /* 为容器划分列 */
      grid-template-columns: 10em 10em 10em;
      /* 为容器划分行 */
      grid-template-rows: 10em 10em 10em;
    }
    .item {
      background-color: seagreen;
    }
  </style>
</head>
<body>
  <!-- 这里们先写一个简单的代码,一个div作为容器下面再放上一个div -->
  <div class="continer">
    <div class="item">item1</div>
  </div>
</body>
</html>

这行代码看完我们再来看下他的效果：
grid
相信看完这些应该对grid布局有一个直观的了解了吧。我们再来深入一步了解他。

如何在项目中为它分配在容器中的占用空间呢？这也叫网格区域
代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>grid布局详解</title>
  <style>
    /* 初始化 */
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    .continer {
      width: 30em;
      height: 30em;
      background-color: wheat;
      /* 设为grid容器 */
      display: grid;
      /* 为容器划分列 */
      grid-template-columns: 10em 10em 10em;
      /* 为容器划分行 */
      grid-template-rows: 10em 10em 10em;
    }
    .item {
      background-color: seagreen;
      /* 起始行/结束行 */
      grid-row: 1/2;
      /* 起始列/结束列 */
      grid-column: 1/2;
      /* 起始行/起始列/结束行/结束列 */
      grid-area: 2/1/3/4;
    }
  </style>
</head>
<body>
  <!-- 这里们先写一个简单的代码,一个div作为容器下面再放上一个div -->
  <div class="continer">
    <div class="item">item1</div>
  </div>
</body>
</html>

设置开始行结束行grid-row 设置开始列结束列grid-columns
行和列一起设置grid-area
有些时候我们并不关心行列号是多少我们可以用跨行命令span来代替
例如grid-row:1/2=grid:1/span1span的意思呢就是跨越多少格.
我们可以把行和列的设置写在一起像这样grid-area:1/1/2/2或者grid-area:1/1/span1/span1这两种写法是一样的。含义就是grid-area:起始行/起始列/结束行/结束列

下面我们来了解一下行列间距gap
上代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    /* grid容器 */
    .continer {
      display: grid;
      width: 30em;
      height: 30em;
      background-color: wheat;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      gap: 1em;
    }
    .item {
      background-color: seagreen;
    }
  </style>
</head>
<body>
  <!-- grid容器 -->
  <div class="continer">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
    <div class="item">item6</div>
    <div class="item">item7</div>
    <div class="item">item8</div>
    <div class="item">item9</div>
  </div>
</body>
</html>

以上代码的效果如下：
gap
我们可以看到行和列之间都有间隙，这个间隙呢就是我们的gap的功劳，其实gap有两个值的，第一个值是行间隙，第二个值是列间隙，这里因为我们设置的行间隙和列间隙相等，所以我们简写为gap:1em;,如果写全的话就是gap:1em 1em;

隐式网格
先上代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    /* grid容器 */
    .continer {
      display: grid;
      width: 30em;
      height: 30em;
      background-color: wheat;
      grid-template-columns: repeat(3, 10em);
      grid-template-rows: repeat(3, 10em);
      gap: 1em;
      /* 调整下容器的宽高以容纳超出网格的项目 */
      width: 50em;
      height: 50em;
    }
    .item {
      background-color: seagreen;
      /* 限定一个项目的大小 */
      width: 6em;
      height: 6em;
    }
  </style>
</head>
<body>
  <!-- grid容器 -->
  <div class="continer">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
    <div class="item">item6</div>
    <div class="item">item7</div>
    <div class="item">item8</div>
    <div class="item">item9</div>
    <!-- 我们再来给容器内添加两个项目看看会发生什么情况 -->
    <div class="item">item10</div>
    <div class="item">item11</div>
    <!-- 超出我们划定的9个网格了!! -->
  </div>
</body>
</html>

效果：

我们可以看到再次在容器中添加了两个项目后超出了我们设置的三行三列的网格范围了，但是网格自动给他们两个又划出了网格，我们称这个超出的网格为隐式网格。那么为什么隐式网格会出现在下方而不是其他地方呢？这和我们grid容器的属性有关，有这样一个属性：

<style>
        /* 排列方式:行优先 */
        grid-auto-flow: row;
        /* 排列方式:列优先 */
        grid-auto-flow: column;
</style>

行优先：先沿着沿着行的方向优先分布，行没有空间后再沿着列，列优先的话就是反着来。
那么我们发现隐式网格的行高要比在网格内的高很多，这该怎么办呢？
隐式网格行高属性grid-auto-rows:;隐式网格列高grid-auto-columns

grid项目对齐

grid项目对齐参照物有两个，分别是容器和单元格
上代码：

<style>
        /* 项目在容器内的对齐方式:垂直方向,平行方向 */
        place-content: center center;
        /* 项目在网格内的对齐方式:垂直方向,平行方向 */
        place-items: center center;
</style>

效果：
place
有五个值start end center space-between space-around
当然我们也可以单独设置某一个项目在单元格内的对齐防止：place-self
代码：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      /* grid容器 */
      .continer {
        display: grid;
        width: 30em;
        height: 30em;
        background-color: wheat;
        grid-template-columns: repeat(3, 10em);
        grid-template-rows: repeat(3, 10em);
        gap: 1em;
        /* 调整下容器的宽高以容纳超出网格的项目 */
        width: 50em;
        height: 50em;
        /* 排列方式:行优先 */
        grid-auto-flow: row;
        /* 设置隐式单元格行高 */
        grid-auto-rows: 10em;
        /* 项目在容器内的对齐方式:垂直方向,平行方向 */
        place-content: center;
        /* 项目在网格内的对齐方式:垂直方向,平行方向 */
        place-items: center;
      }
      .item {
        background-color: seagreen;
        /* 限定一个项目的大小 */
        width: 6em;
        height: 6em;
      }
      .item:nth-of-type(6) {
        place-self: end start;
      }
    </style>
  </head>
  <body>
    <!-- grid容器 -->
    <div class="continer">
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
      <div class="item">item4</div>
      <div class="item">item5</div>
      <div class="item">item6</div>
      <div class="item">item7</div>
      <div class="item">item8</div>
      <div class="item">item9</div>
      <!-- 我们再来给容器内添加两个项目看看会发生什么情况 -->
      <!-- <div class="item">item10</div>
      <div class="item">item11</div> -->
      <!-- 超出我们划定的9个网格了!! -->
    </div>
  </body>
</html>

效果：
place-self

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

Ement常用语法、元素的四类属性、一些常用的布局标签

2021-12-22 23:36:10