响应式与自适应常见布局静态布局（Static Layout）即传统 Web 设计，对于 PC 设计一个 Layout

此文写于2019年。此文的内容集成了各博客、优质文章内容，若有侵权，请联系删除。

常见布局

静态布局（Static Layout）
即传统 Web 设计，对于 PC 设计一个 Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；
对于移动设备，单独设计一个布局，使用不同的域名如 wap. 或 m.。
就是不管浏览器尺寸具体是多少，网页布局就按照当时写代码的布局来布置，就是我们现在的前端布局。
自适应布局（Adaptive Layout）
自适应布局（Adaptive）的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。
你可以把自适应布局看作是静态布局的一个系列。
就是说你看到的页面，里面元素的位置会变化而大小不会变化；
流式布局（Liquid Layout）
流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。
就是你看到的页面，元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
响应式布局（Responsive Layout）
分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。
可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变。

白话

响应式与自适应的原理是相似的，都是检测设备，根据不同的设备采用不同的 css，而且 css 都是采用的百分比的，而不是固定的宽度，不同点是响应式的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式，而自适应不会，所有的设备看起来都是一套的模板，不过是长度或者图片变小了，不会根据设备采用不同的展示样式。

自适应设计与响应式设计

目前非常流行自适应设计与响应式设计，而且经常让人混淆，自适应设计不应与自适应布局混为一谈，它们是完全不一样的概念。
在这先说明下这两者的异同：
自从移动终端飞速发展以来，各种各样的机型突飞猛进，很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个 mobile 版本，或者 iPhone/iPad 版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个 portal（入口），会大大增加架构设计的复杂度。于是，很早就有人设想，能不能"一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，据屏幕宽度，自动调整布局？
2010 年，Ethan Marcotte 提出了"自适应网页设计"（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。

如图所示就叫做自适应布局。
自适应布局有它的使用价值，在于它能够提供一种更加实用的解决方案，使得项目的实现成本更低，并且更加易于测试。一个自适应布局可以被看作是响应式布局的一个更加廉价的替代品，会在项目资源紧缺的情况下更具有吸引力。而在响应式布局中你却要考虑各种不同的状态:
响应式网页设计是自适应网页设计的子集。
响应式网页设计指的是页面的布局（流动网格、灵活的图像及媒介查询）。总体目标就是去解决设备多样化问题。响应式布局等于流动网格布局，而自适应布局等于使用固定分割点来进行布局。

当固定宽度与流动宽度结合起来时，自适应布局就是一种响应式设计，而不仅仅是它的一种替代方法。

响应式设计的步骤

设置 Meta 标签
大多数移动浏览器将 html 页面放大为宽的视图（viewport）以符合屏幕分辨率。可以使用视图的 meta 标签来进行重置。
下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在标签里加入这个 meta 标签。
```
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
```
user-scalable = no 属性能够解决 Pad 切换横屏之后触摸才能回到具体尺寸的问题。
创建响应式网格视图
首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box。确保边距和边框包含在元素的宽度和高度间。
```
* {
    box-sizing: border-box;
}
```
一般将网页设置为 12 列的网格，每列的百分比: 100% / 12 列 = 8.33%，这样可以更好的控制响应式网页，如 Bootstrap 栅格系统。
```
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
```

通过媒介查询来设置样式 Media Queries
Media Queries 是响应式设计的核心。
它根据条件告诉浏览器如何为指定视图宽度渲染页面。假如一个终端的分辨率小于 768px，那么可以这样写：

/* 为移动端设计: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .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%;}
}

这里的样式就会覆盖已经定义好的样式。

设置多种视图宽度
假如我们要设定兼容 iPad 和 iphone 的视图，那么可以这样设置：

/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}

常见视图宽度单位：
px：px 单位名称为像素，相对长度单位，像素（px）是相对于显示器屏幕分辨率而言
em：em 单位名称为相对长度单位，继承父级元素的字体大小
rem：是指相对于根元素的字体大小的单位

视图宽度单位推荐：rem > % > rm > px

响应式与自适应

常见布局

白话​

自适应设计与响应式设计

响应式设计的步骤

白话