响应尺寸

响应计算

通过本章的学习来掌握开发中针对不同尺寸设备的响应式处理。

viewport

移动端浏览器将网页放置在虚拟的 viewport 中，不同手机分辨率对视口进行缩放即可全屏显示内容。不同浏览器定义的 viewport 尺寸不同。

视口概念

所以 viewport 也可以理解为屏幕有多少像素来显示内容，这和电脑端是不同的。

电脑端是显示器的多大分辨率多少就用多少像素来显示
移动端是 viewport 分辨率多少就用多少像素来显示
viewport 是可以改变的，就像显示器的分辨率可以改变一样

查看尺寸

主流浏览器的默认 viewport 大小（因为浏览器间不统一，所以也没有必要关注下面的尺寸，只做为了解就行）

浏览器	尺寸
Safari iPhone	980px
Opera	850px
Android WebKit	800px
IE	974px

可以在控制台查看到 viewport 大小

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
  	斑马兽 banmashou.com
  </body>
</html>

在浏览器打开上面网页，并通过控制台查看结果如下

改变视口

使用<meta name="viewport" content="width=2000px" />可以调整视口，这有点像设置相同尺寸桌面显示不同的分辨率。

下面是将视口定义为 2000 与 300 的差别，这类似于同样 27 寸分辨率下 4K 与 1080 显示的区别。

媒体查询

@media 是根据分辨率来响应式布局的，所以 viewport 尺寸的不同将影响媒体查询的使用。

下面代码用于在分辨率小于 500px 时更改内容颜色，但是因为没有设置 viewport，而使用浏览器默认的视口，这会造成在手机上无法进行响应操作，因为 viewport 尺寸大于 500px。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <style>
      @media (max-width: 500px) {
        body {
          color: red;
        }
      }
    </style>
    斑马兽 banmashou.com
  </body>
</html>

面当我们设置好 viewport 后就可以进行响应处理了，下面是将 viewport 设置为 500px

<meta name="viewport" content="width=500"/>

设备尺寸

像上面通过人为设置像素值，显示是不可取的。如果响应布局当然希望 viewport 与设备尺寸一至，可喜的是，系统为我们提供了device-width变量值用于识别设备宽度。

<meta name="viewport" content="width=device-width" />

其他属性

下面介绍其他可用在 meta 标签上的属性

属性	说明
initial-scale=1	初始缩放比例
minimum-scale=.5	允许用户最小缩放比例
maximum-scale=2.5	允许用户最大缩放比例
user-scalable=yes	是否允许用户绽放

mac 用户在 chrome 中使用 option+shift+鼠标按住移动进行缩放

JS 延迟

设置 user-scalable=no 时可以 js 解决 300 延迟的问题，你也可以理解为当设置 user-scalable=yes 时，系统要识别两只手指，所以要有个宽容时间。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=yes" />
  </head>
  <body>
    <style>
      body {
        width: 100vw;
        height: 100vh;
      }
    </style>
    <script>
      let i = 1
      document.body.addEventListener('click', () => console.log(i++))
    </script>
  </body>
</html>

rem/em

em 理解为继承（相对）单位，它需要一个参考的继承属性。

em

我们知道字体大小是可以继承的，我们对下面例子进行说明

span 没有设置字体大小，将继续父级 article 标签定义的大小 15px
strong 定义了 2em 字体大小，因为使用了 em 单位即是父级 15px X 2=30px

可以通过 edge 或 chrome 浏览器调试工具的已计算标签查看

<style>
  article {
    font-size: 15px;
  }
  strong {
    font-size: 2em;
  }
</style>

<article>
  <span>banmashou.com</span>
  <strong>斑马兽</strong>
</article>

多级继承

下面代码是多层次的嵌套，如果使用 em 单位定义 font-size 会向上一直查找定义了 font-size 的父级来进行计算。直到找到 html 标签为止。

所以下面的 strong 定义的 2em 计算结果依然是 30px 即 article 标签的 font-size:15px 乘以 2。

<style>
  article {
    font-size: 15px;
  }
  strong {
    font-size: 2em;
  }
</style>

<article>
  <div>
    <span>banmashou.com</span>
    <strong>斑马兽</strong>
  </div>
</article>

padding/margin

font-size 本身是可以继承的，所以 em 参考父级元素定义的 font-size。但 padding/margin 在 CSS 中不会继承父级定义的 padding/margin。

如果 padding/margin 使用 em 单位将参考本元素的 font-size。

下面示例中最终 strong 标签的 padding 与 margin 都是 60px，因为定义了 2em 所以最终结果为当前标签的 font-size*2

<style>
  article {
    font-size: 15px;
  }
  strong {
    font-size: 2em;
    padding: 2em;
    margin: 2em;
  }
</style>

<article>
  <div>
    <span>banmashou.com</span>
    <strong>斑马兽</strong>
  </div>
</article>

rem

rem 本向也有 em 的特性即参考继承，只不过它只参考根元素（root）即 html 标签定义的 font-size。我们来通过下面的示例详细说明。

为 html 标签定义了 font-size:30px，页面中使用 rem 单位的元素将 30px 为参考，即 1rem=30px
span 标签使用了 font-size:2em，会参考父级 article 定义的 font-size，最后计算结果为 font-size:30px
strong 标签定义了 font-size:2rem，会参考 html 标签的 font-size，最后计算结果为 60px
strong 标签定义了 padding:2rem，计算结果也是 60px
strong 标签定义了 margin:2em，将会参考本身元素的 font-size，上面已经说明 strong 的 font-size 为 60px，所以最终 margin 结果为 120px

<style>
  html {
    font-size: 30px;
  }
  article {
    font-size: 15px;
  }
  span {
    font-size: 2em;
  }
  strong {
    display: block;
    font-size: 2rem;
    padding: 2rem;
    margin: 2em;
  }
</style>

<article>
  <div>
    <span>banmashou.com</span>
    <strong>斑马兽</strong>
  </div>
</article>

使用建议

em 与 rem 都是不错的响应单位，根据需要进行选择。em 具有继承特性，rem 的参考元素是唯一 HTML，所以 rem 操作简单。em 继承关系会相对复杂。

布局上的 margin/padding 使用 rem 是不错的选择，字体大小等使用 em 与 rem 都可以。

尺寸响应

问题分析

下面是尺寸为 375x600 的设计稿，绿色区域为 200px 红色为 175px 宽度

使用固定像素定义时在 iphone6 与 iphon6 plus 中的显示效果并不相同

实例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />
  </head>
  <body>
    <div class="left"></div>
    <div class="right"></div>
  </body>
  <style>
    div {
      height: 600px;
    }
    .left {
      width: 200px;
      background: #76ba65;
      float: left;
    }
    .right {
      width: 175px;
      background: #df0f71;
      float: left;
    }
  </style>
</html>

自动响应

实际操作中不同设备只能取宽或高一个尺寸为响应处理，一般情况下我们取宽度响应，高度自动处理。小尺寸时高度产生垂直滚动条，这并不影响什么。

计算公式

使用 rem 单位来处理响应，因为改变 rem 单位会影响所有使用 rem 的元素，这确实非常的方便。

rem 是在根元素中定义的 font-size
rem 用来在多个设备响应处理时使用
html 元素也可以使用:root 选择器选择

下面展示的设计稿为 375px 宽，下面公式表示 1px 所占的屏幕尺寸宽度，有以下几点需要说明

100vw 表示 100%视口宽度
因为使用了 vw 宽度系统会根据不同设备自动计算 rem

:root {
	font-size: calc(100vw / 375);
}

完整代码如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>banmashou.com</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />
  </head>
  <body>
    <div class="left"></div>
    <div class="right"></div>
  </body>
  <style>
    :root {
      font-size: calc(100vw / 375);
    }
    div {
      height: 600rem;
    }
    .left {
      width: 200rem;
      background: #76ba65;
      float: left;
    }
    .right {
      width: 175px;
      background: #df0f71;
      float: left;
    }
  </style>
</html>

响应尺寸 ​

响应计算 ​

viewport ​

视口概念 ​

查看尺寸 ​

改变视口 ​

媒体查询 ​

设备尺寸 ​

其他属性 ​

JS 延迟 ​

rem/em ​

em ​

多级继承 ​

padding/margin ​

rem ​

使用建议 ​

尺寸响应 ​

问题分析 ​

自动响应 ​