响应式网站开发基础

准备工作

远程调试

chrome 浏览器设置
- 在 chrome 浏览器中打开 chrome://inspect
手机设置
1. 打开开发者模式
2. 打开 USB 调试模式
3. 打开手机端 chrome 浏览器

基础知识

视窗（viewport）

视窗是指浏览器能够显示内容的区域。

与设备无关的像素值（DIPs）

浏览器并不是物理硬件的像素宽度而工作的，而是根据 DIPs 宽度。DIPs (device independent pixels)，与设备无关的像素值。DIPs 将像素值与实际距离联系起来。不论显示器的像素密度是多少，同一 DIPs 值表示屏幕上同样大小的空间。

字体改善机制

在屏幕较小的移动设备上显示网页时，浏览器为了让内容看上去更好一些，会开启字体改善机制。浏览器会试图挑出页面中的首要内容，并把它们放大。也就是说有的字体会变大，这易于阅读，但是其它字体还是会一样小，非常难看清。

像素比（DPR）

DPR (device pixel ratio)，设备像素比。DPR = hardware pixels / DIPs，即设备像素比 = 物理像素 / 相对像素。记住，像素比是一维数字比，而不是二维的数字比。

下面计算每个图代表的 DRP：

技术图片

其中，每个蓝色格子代表一个物理像素，一个橘色方框代表一个相对像素。

答案：

1图,一个实际像素点表示一个相对像素，DPR=1；

2图,每行的两个实际像素点表示一个相对像素，DPR=2；

3图,三个实际像素点表示一个相对像素，DPR=3；

4图,一又二分之一个实际像素点表示一个相对像素，DPR=1.5；

用响应式思维思考

设置窗口

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

为 head 元素添加 viewport 标签可以让浏览器知道我们的意图，我们需要在视窗值后面设置页面宽度来指导页面针对具体设备进行宽度调整，这使页面可以匹配不同屏幕尺寸。

初始缩放比例设置为 1，使浏览器相对像素与 CSS 像素的比例是一比一。如果不把初始缩放比例设为 1 的话，有的浏览器会在切换为横屏模式时依旧保持之前的页面宽度，而且它们的内容只是进行缩放，而无法自动调整布局。

元素的最大宽度

设置元素的最大宽度来防止溢出。

CSS

img, embed,
object, video {
  max-width: 100%;
}

点击目标大小

我们的手指大约有 10mm 宽，差不多等于 40px CSS 像素。所以，按钮至少应该设置为 40 * 40px，但是与其设置那么大，更不如设置为 48 * 48px。这样能确保元素之间有足够的距离，以及那些手指更粗的人也能使用无碍。有些敲击目标可以设置更小一些，但是请确保任何两个敲击目标之间至少有 40px 的距离，这样能防止用户同时点击到两个按钮或者完全看不到按钮。

从小处开始

设计从最小的屏幕做起，我们就必须仔细权衡对用户最重要的信息，什么事情是用户最想做的，或者什么是用户最希望在屏幕上看到的？

如果是从最大的屏幕开始设计，一些重要的信息很可能会被轻易删掉。相反，明确内容的优先级，然后从小到大的设计，最重要的内容永远都会留在页面上。无论用户使用什么样的设备，都能得到最完整的体验。

比如一个卖硬件的商店的设计，优先考虑的信息是最近商店的地址、营业时间和联系方式，把这些信息放在页面顶部可以让我更好的看到。

除了从小到大的设计，代码编写最好也是从小到大的，这样就能知道主要风格和布局是否能够兼容任何设备，甚至是古老的不支持媒体查询的浏览器。但是最好的理由是性能，如果从最小的设备开始，就必须一开始就去考虑性能的问题，需要我们有意识的去做一些决定来确定内容优先级以及要为用户提供多少信息。

搭建

添加媒体查询

link 标签添加

<link rel="stylesheet" media="screen and (min-width:500px)" href="over500.css">

@media 标签嵌入

@media screen and (min-width: 500px) {
body { background: blue; }
}

@import 标签嵌入

@import url("no.css") only screen and (min-width:500px);
/* 因为性能的原因，应该避免使用@import */

间断点的选取

弹性

常见响应模式

序号	模式	图解
1	大体流动模型 (mostly fluid)
2	掉落列模型 (column drop)
3	活动布局模型 (layout shifter)
4	画布溢出模型 (off canvas)

有时一个网页同时结合几种模式，例如掉落列和画布溢出模型。

模式-掉落列模型

首先要介绍的掉落列可能是最简单的，在视窗最窄的时候，每个元素都纵向堆放，一个落一个。当视窗变宽，元素也随之扩展，直到到达第一个间断点。

在第一个间断点，所有元素不再竖直堆放，而是前两个元素并排显示，第三个元素在它们下面。这些元素会继续随着视窗而延展，直到到达下一个间断点。

接着，它们会重排列成一个三列的布局。通常，当视窗达到最大宽度，列也达到最大宽度。然后，它们便不会随视窗延展，而是在两侧添加外边距。

技术图片

代码示例：

HTML

<div class="container">
  <div class="box dark_blue"></div>
  <div class="box light_blue"></div>
  <div class="box green"></div>
</div>

CSS

.container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 100%;
}

/* 第一个间断点 */
@media screen and (min-width: 450px) {
  .dark_blue {
    width: 25%;
  }
  .light_blue {
    width: 75%;
  }
}

/* 第二个间断点 */
@media screen and (min-width: 550px) {
  .dark_blue,
  .green {
    width: 25%;
  }
  .light_blue {
    width: 50%;
  }
}
/* 第三个间断点 */
@media screen and (min-width: 700px) {
  .container {
    width: 700px;
    margin-left: auto;
    margin-right: auto;
  }
}

模式-大体流动模型

大体流动模型与掉落列模型非常相似，但是它更像网格系统，它有更多的列，而且列的响应方式也不相同，这要取决于视窗宽度。

在视窗宽度最窄时，与掉落列模型一样，为竖直堆放布局。但是随着视窗变宽，网络模型开始出现。最终，当视窗达到最大宽度，两边会出现外边距，而内容不再延展。

技术图片

代码示例：

HTML

<div class="container">
  <div class="box dark_blue"></div>
  <div class="box light_blue"></div>
  <div class="box green"></div>
  <div class="box red"></div>
  <div class="box orange"></div>
</div>

CSS

.container {
  display: flex;
  flex-wrap: flex;
}

.box {
  width: 100%;
}

/* 第一个间断点 */
@media screen and (min-width: 450px) {
  .dark_blue,
  .green {
    width: 50%;
  }
}

/* 第二个间断点 */
@media screen and (min-width: 500px) {
  .dark_blue,
  .light_blue {
    width: 50%;
  }
  .green,
  .red,
  .orange {
    width: 33.333333%;
  }
}

/* 第三个间断点 */
@media screen and (min-width: 700px) {
  .container {
    width: 700px;
    margin-left: auto;
    margin-right: auto;
  }
}

模式-活动布局模型

活动布局模型应该是最灵活的响应式模型了，它有很多适用于不同设备的间断点。但最关键的是它的布局变换方式，并不是单纯的重排列到其它列的下方。flexbox的亮点在这才真正凸显，因为我们可以利用css order属性。

技术图片

代码示例：

HTML

<div class="container">
  <div class="box dark_blue"></div>
  <div class="container" id="container2">
    <div class="box light_blue"></div>
    <div class="box green"></div>
  </div>
  <div class="box red"></div>
</div>

CSS

.container {
  width: 100%;
  display: flex;
  flex-wrap: flex;
}

.box {
  width: 100%;
}

/* 第一个间断点 */
@media screen and (min-width: 500px) {
  .dark_blue {
    width: 50%;
  }
  #container2 {
    width: 50%;
  }
}

/* 第二个间断点 */
@media screen and (min-width: 600px) {
  .dark_blue {
    width: 25%;
    order: 1;
  }
  #container2 {
    width: 50%;
  }
  .red {
    width: 25%;
    order: -1;
  }
}

模式-画布溢出模型

在画布溢出模型中，内容并不是竖直堆放的，而是将不常用的内容，比如导航栏或者应用菜单放在屏幕以外，只有当屏幕足够大的时候才显示出来。在小尺寸屏幕上，溢出画布的内容通常会在用户点击菜单按钮时出现。

技术图片

代码示例：

HTML

<nav id="drawer" class="dark_blue">
  ...
</nav>
<main class="light_blue">
  ...
</main>

CSS

html, body, main {
  height: 100%;
  width: 100%;
}

nav {
  width: 300px;
  height: 100%;
  position: absolute;
  transform: translate(-300px, 0);
  transition: transform 0.3s ease;
}

nav.open {
  transform: translate(0, 0);
}

/* 第一个间断点 */
@media screen and (min-width: 600px) {
  nav {
    position: relative;
    transform: translate(0, 0);
  }
  body {
    display: flex;
    flex-flow: row nowrap;
  }
  main {
    width: auto;
    flex-grow: 1;
  }
}

JavaScript

menu.addEventListener(‘click‘, function (e) {
  drawer.classList.toggle(‘open‘);
  e.stopPropagation();
});

优化更多

响应式图片

响应式表格

隐藏列

当视窗尺寸缩小时，隐藏列实质上是根据它们的重要性来进行的。在较小屏幕上选择隐藏某些内容来达到我们的目的。

不再有表格

用“不再有表格”技术，当视窗宽度小于一定值，表格会瓦解重组成长列表。与数据表不同，这种技术的好处是所有的数据都是可见的，不管视窗的尺寸是多大。

在一个较宽的窗口时，所有东西都正常显示。但是当视窗缩小，表格瓦解，每个纵列实际上变成独立一行，表头在旁边。使用媒体查询，需要告诉表格当视窗小于一定宽度，让表格不再显示为“表格”。在媒体查询里，强制所有的 table、thead、tbody、tr、th、td 执行块级显示

代码示例：

HTML

<table>
  <thead>...</thead>
  <tbody>
    <tr>
      <td data-th="Team">...</td>
      <td data-th="1st">...</td>
      <td data-th="2nd">...</td>
      <td data-th="3rd">...</td>
      <td data-th="4th">...</td>
      <td data-th="5th">...</td>
      <td data-th="6th">...</td>
      <td data-th="7th">...</td>
    </tr>
  </tbody>
</table>

CSS

@media screen and (max-width: 500px) {
  table, thead, tbody, tr, th, td {
    display: block;
  }
  thead tr {  /* 对屏幕阅读器友好 */
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  td {
    position: relative;
    padding-left: 50%;
  }
  td:before {
    position: absolute;
    left: 6px;
    content: attr(data-th);
    font-weight: bold;
  }
}

表格内滚动

为了把表格放在视窗里，可以做的最简单的事情是把它放在一个 div 里面，然后设置宽度为 100%，溢出滚动。

代码示例：

HTML

<div class="contained_table">
  <table>
    <tr>
      <td>Team</td>
      <td>1st</td>
      <td>2nd</td>
      <td>3rd</td>
      <td>4th</td>
      <td>5th</td>
      ...
    </tr>
  </table>
</div>

CSS

div.contained_table {
  width: 100%;
  overflow-x: auto;
}

字体

在阅读是，一行文字太少或太多都是不合理的。因此，行的长度是在建立网站时的重要参考因素，这也是在选择断点的时候经常要拿来参考的。使字体足够大以适应不同设备的阅读效果是很重要的。建议基本字体设置至少 16px，行高至少有 1.2em。根据具体情况，可以在文本很多的网站增加更多行高。

记住，合适的字体可以使阅读体验提升很多。

次要断点

除了选择主要断点，就是布局显著改变的地方，增加副断点来实现一些小的改变也是很有帮助的。例如，在主要断点之间调整元素的外边距和内边距可能是很有帮助的。或者给一些内容增加字号会更容易阅读，而且布局上会感到更自然。

好了，就是这样！