响应式布局浅析

时间 2020-01-05

标签响应布局浅析繁體版

原文原文链接

所谓响应式布局，就是页面会根据当前运行的设备的大小自行进行调整，实现方案主要有如下三种：css

1）隐藏html

例如在 PC 端的一些友情连接或者不重要的内容在移动端能够选择隐藏起来。web

2）换行浏览器

在 PC 端显示一行的内容，因为移动端设备宽度比较小，因此能够选择显示为几行。iphone

3）自适应空间布局

例如，左边元素给定一个具体的值，右边元素的宽度令其根据不一样的设备宽度自行调整。字体

具体的实现方法主要有如下几种：flex

1）remcode

rem 是一个相对单位，通常 1rem = html设置的 font-size 的值。htm

关于 rem 的详细介绍能够参考移动 web 开发适配秘籍 Rem 这个免费课程。

经过设置不一样设备 html 的 font-size 改变 rem 的值，令 1rem 单位的值随着设备的增大而增大。

2）viewport

设置 <meta name="viewport" content="width=device-width, initial-scale=1.0" > ，关于这个下面会介绍。

3）media query

判断当前是什么设备，而后根据不一样的设备设置不一样的样式。

接下来先说一下 viewport 这个 meta 标签。

<meta name="viewport" content="width=device-width, initial-scale=1.0" >

为何要让可视区域的宽度等于设备的宽度

viewport 指的是可视区域(说白了就是展现页面的区域，通常状况下固然是设备的屏幕多大就让展现页面的区域是多大，若是屏幕的宽度是 320px，不设置可视区域的大小为 320px，将一个 960px 的页面(假设PC端页面是960px这么大)硬生生地展现在 320px 屏幕上，只能将页面总体缩小为原来的 1/3 去展现，那用户看起来页面上的字就过小了。

若是将可视区域的宽度调整为设备屏幕的宽度，这样会PC端 960px 的页面会在 320px 宽度的设备上从新布局，例如以前在 PC 端要展现在一行的内容，在移动端因为宽度只有 320px 一行确定展现不下了，因此就会进行换行。通过这样布局显示出来的字体大小和 PC 端是同样的，用户体验就会比较好。

因此咱们须要将可视区域的宽度设置为设备的宽度，接下来会有代码进行验证。

对于下面的代码

<style>
    .container{
      margin:0 auto;
      max-width:800px;
      display: flex;
      border:1px solid black;
    }
    .left{
      display: flex;
      width: 200px;
      background:red;
      margin:5px;
    }
    .right{
      display: flex;
      flex: 1;
      background:blue;
      margin:5px;
    }

  </style>
</head>
<body>
<div class="container">
  <div class="left">
    这里是一些不重要的内容，好比友情连接、广告
  </div>
  <div class="right">
    这里是一些重要的内容，好比一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，好比一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，好比一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，好比一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，好比一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，好比一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，好比一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，好比一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，好比一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，好比一篇文章，文章是整个页面的核心内容。
  </div>
</div>
</body>

若是不加 <meta name="viewport" content="width=device-width, initial-scale=1.0" >，在PC 端的页面以下

在 iPhonex上的页面

很明显，在移动端上并无进行适配只是进行了等比例缩放，致使字体很小，用户体验差。

这个时候再加上 <meta name="viewport" content="width=device-width initial-scale=1.0">，在移动端的页面以下所示

可见并非进行总体缩放，而是根据设备的宽度经过换行等方式进行了适配，这个时候的字体和PC端的字体大小也差很少，用户体验好。

经过 <meta name="viewport" content="width=device-width initial-scale=1.0"> 这条语句来进行移动端适配在一些比较简单的状况，对移动端适配要求比较低的状况下是能够的，可是若是想要进行更好的移动端适配还要采用一些其余的措施，例如媒体查询等。

上图中，红色的部分实际上在移动端能够不用显示的，由于它并非重要的内容，这个时候就能够采用媒体查询的方式当设备的宽度小于某个值以后就隐藏左边红色的区域。

能够在上面的 css 代码中添加媒体查询，当设备的宽度小于 640px 时就隐藏左边的红色区域。

@media (max-width: 640px){
 .left{
   display: none;
 }
}

在 iphonex 的显示状况以下图所示：

再来看一个案例：

HTML 代码：

<div class="container">
  <div class="intro">
    介绍1
  </div>
  <div class="intro">
    介绍2
  </div>
  <div class="intro">
    介绍3
  </div>
  <div class="intro">
    介绍4
  </div>
</div>

CSS 代码

.container{
  margin:0 auto;
  max-width:800px;
  border:1px solid black;
}
.intro{
  display: inline-block;
  width:180px;
  height:180px;
  line-height: 180px;
  text-align: center;
  border-radius: 90px;
  border:1px solid red;
  margin:7px;
}

在 PC 端页面显示以下：

不加 <meta name="viewport" content="width=device-width initial-scale=1.0"> 时移动端页面以下：

会发现页面只是在 pc 端的基础上进行了等比例缩放，如今加上 meta 标签，

能够看到添加meta标签后会自动根据设备的宽度进行适配，iphone 5 的宽度为 320px，圆圈的宽度为 182px， margin-left 为 7px，再加上右边还有 7px 的 margin-right，因此加起来一共占了 196px，因此还剩下 124px，因此第二个圆圈只能排在第二行。

如今有个问题是靠左边太多了，咱们想让它在移动端时能够居中，因此利用媒体查询，加上下面的 css 代码。

@media (max-width: 640px) {
  .intro {
    margin: 7px auto;
    display: block;
  }
}

注意这个地方必须加上 display: block，不加以前是 inline-block，在 inline-block 条件下 auto 是不会起效果的，左右没有 margin 值。

block 元素是会占据一行的，因此 auto 能够居中，向 inline-block 并不会单独占一行，它的宽度是有限的，谈不上 auto。

加上上面的媒体查询以后，当设备宽度小于 640px 时就会圆圈就会居中显示。

如今还有一个问题是因为圆圈的数值是经过 px 单位写死的，因此不管设备的大小如何改变，圆圈的大小是不会改变的，随着设备宽度（小于640px）的变化，圆圈的大小始终是不会变化的。

这样随着设备宽度的增长，圆圈就显得比较小了，那么有没有什么方法可使得随着设备宽度的增长，圆圈也能够随着增长呢？

能够的，经过 rem 就能够实现。

rem 是一种根据 html 的 font-size 改变更态修改值的相对单位。

咱们能够经过设置媒体查询，设置几个设备宽度下不一样的 html 的 font-size ，这样当设备宽度变大时，1 rem 的值也随着变大，这样就能够实现圆圈跟着变大了。

这里假设 1rem = 20px

将 css 代码中的 px 变为 rem

.container{
  margin:0 auto;
  max-width:800px;
  border:1px solid black;
}
.intro{
  display: inline-block;
  width:9rem;
  height:9rem;
  line-height: 9rem;
  text-align: center;
  border-radius: 4.5rem;
  border:1px solid red;
  margin:.3rem;
}
@media (max-width: 375px){
  html{
    font-size:24px;
  }
}
@media (max-width: 320px){
  html{
    font-size:20px;
  }
}
@media (max-width: 640px) {
  .intro {
    margin: .3rem auto;
    display: block;
  }
}

注意 @media (max-width: 375px) 必定要写在 @media (max-width: 320px) 的前面，不然将会一直应用 @media (max-width: 375px) 的样式，例如设备的宽度为 220px，这个时候两个都知足，可是因为@media (max-width: 375px) 在后面因此它设置的样式会覆盖前面的样式。

设置完后，当设备宽度为 375 时 html 的 font-size为 24px，此时 1rem = 24px（以前 1rem = 20px）因此圆圈会被放大一些。

经过上图能够看到，圆圈的大小变成了 218*218，再也不是以前的 182*182。

注意使用 rem 时有时计算出来的像素是不精准的，例如上例中我想令 .intro 元素的高度为 175 px，因为 1 rem = 24 px，因此须要设置

height = 7.2916666666666666666666666666667rem 在实际应用通常不会取小数点后那么多位，假设这里取 height = 7.3 rem 因此 height 应该为 7.3 * 24 = 175.2，可是在浏览器中 height 倒是 177.19 减去上下的边框等于 175.19 并不等于 175.2，因此会有一点误差。

因此，在对像素精度要求很高的地方，使用 rem 时要格外谨慎。

完，若有不恰当之处欢迎指正哦。