响应式设计

响应式 web 设计会让您的网页在所有设备上看起来都不错，响应式 web 设计并不是程序或 JavaScript

如果您使用 CSS 和 HTML 调整大小、隐藏、缩小、放大或移动内容，以使其在任何屏幕上看起来都很好，则称为响应式Web设计

---

视口

视口（viewport）是用户在网页上的可见区域，视口随设备而异，在移动电话上会比在计算机屏幕上更小

可以通过 <meta> 标签来控制视口

应该在所有网页中包含以下 <meta> 视口元素：

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

上述代码为浏览器提供了关于如何控制页面尺寸和缩放比例的指令

width=device-width 部分将页面的宽度设置为跟随设备的屏幕宽度（视设备而定）。当浏览器首次加载页面时，initial-scale=1.0 部分设置初始缩放级别

---

网格视图

许多网页都基于网格视图（grid-view），这意味着页面被分割为几列，这样可以更轻松地在页面上放置元素

响应式网格视图通常有 12 列，总宽度为 100％，并且在调整浏览器窗口大小时会收缩和伸展

构建响应式网格视图，确保所有 HTML 元素的 box-sizing 属性设置为 border-box

* {
  box-sizing: border-box;
}

我们希望使用拥有 12 列的响应式网格视图，来更好地控制网页

为 12 列中的每一列创建一个类，即 class="col-" 和一个数字，该数字定义此节应跨越的列数

[class*="col-"] {
  float: left;
  padding: 15px;
  border: 1px solid red;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

分隔好了列后，相关元素的列数占比就可以如下设置：

<div class="row">
  <div class="col-3">...</div>  <!-- 占25% -->
  <div class="col-9">...</div>  <!-- 占75% -->
</div>

---

媒体查询

媒体查询是 CSS3 中引入的一种 CSS 技术，仅在满足特定条件时，它才会使用 @media 规则来引用 CSS 属性块

我们可以添加一个断点，其中设计的某些部分在断点的每一侧会表现得有所不同，@media 就是一个断点的添加

/*移动端优先方式（在对台式机或任何其他设备进行设计之前，优先针对移动设备进行设计（这将使页面在较小的设备上显示得更快））*/
/* 移动端优先：针对手机： */
[class*="col-"] {
  width: 100%;
}
/*当屏幕（浏览器窗口）小于 768px 时，每列的宽度应为 100％*/
@media only screen and (max-width: 768px) {
  /* 针对手机： */
  [class*="col-"] {
    width: 100%;
  }
}
/*针对平板电脑的断点*/
@media only screen and (min-width: 600px) {
  /* 针对平板电脑： */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
/*针对网页桌面端的断点*/
@media only screen and (min-width: 768px) {
  /* 针对桌面： */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

相关的使用案例：

/*如果方向为横向模式（landscape mode），则网页背景为浅蓝色*/
@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}
/* 如果屏幕尺寸为 600 像素或更小，请隐藏该元素 */
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}
/* 如果屏幕尺寸为 601px 或更大，请将 <div> 的 font-size 设置为 80px */
@media only screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}
/* 如果屏幕尺寸为 600px 或更小，请将 <div> 的 font-size 设置为 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

---

图像的响应式网页设计

使用width属性

如果 width 属性设置为百分百，且高度设置为 "auto"，则图像将根据响应来放大或缩小（放大和缩小没有限制）

img {
  width: 100%;
  height: auto;
}

使用max-width属性

如果将 max-width 属性设置为 100％，则图像将按需缩小，但绝不会放大到大于其原始大小，该方法不常用

背景图像也可以响应调整大小和缩放比例

如果将 background-size 属性设置为 "contain"，则背景图像将缩放，并尝试匹配内容区域，但是图像还是保持其长宽比

如果将 background-size 属性设置为 "100% 100%"，则背景图像将拉伸以覆盖整个元素内容区域

如果 background-size 属性设置为"cover"，则背景图像将缩放以覆盖整个内容区域，"cover" 值保持长宽比，且可能会裁剪背景图像的某部分

为不同设备准备不同的图像

大幅的图像在大型计算机屏幕上可以完美显示，但在小型设备上就没用了

/* 针对小于 400 像素的宽度： */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* 针对 400 像素或更大的宽度： */
@media only screen and (min-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

---

视频的响应式网页设计

视频的响应式设计和图像的响应式设计差不多，width和max-width属性都可以使用在视频的响应式网页设计中

video {
  width: 100%;
  height: auto;
}