响应式布局

前言

早在2010年，设计人员和开发人员就开始实践“响应网页设计”(RWD):

随着网络设备尺寸千变万化，为了达到相同的体验，通常的做法是剪切不相关的设计。实际上，我们可以让我们的设计更好的适应渲染屏幕。

一、 什么是响应式

响应式网页设计就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。

打个比方来说：现在社会有很多响应产品，例如折叠沙发，折叠床等等，

在项目中你会遇到不同的终端，由于终端分辨率不同，所以你要想让用户体验更好，就必要让你的页面能够兼容多个终端。

响应式Web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化

二、 什么时候用到响应式

• 小型的项目或需求页PC端和移动端共用一套
• 大型的项目PC端（固定布局）和移动端（移动适配）各用一套

三、 媒体查询

3.1 为什么响应式 Web 设计需要媒体查询

• 在媒体查询出现之前，针对不同尺寸设备的设计常常依靠JS或PHP等依靠userAgent来勉强实现，而现在自适应的响应式设计成为了家常便饭。

• 作为响应式布局的核心技术之一，媒体查询（media query）提供了一种检测设备特征的方法，它使开发者可以根据不同的设备特征应用不同样式，为不同设备创建合适的用户体验。

• CSS3媒体查询可以让我们针对特定的设备能力或条件为网页应用特定的CSS样式。如果没有媒体查询，光用CSS是无法大大修改网页外观的。

• 这个模块让我们可以提前编写出适应很多不可预测因素的CSS规则，比如屏幕方向水平或垂直、视口或大或小等等。

• 弹性布局虽然可以让设计适应较多场景，也包括某些尺寸的屏幕，但有时候确实不够用，因为我们还需要对布局进行更细致的调整。媒体查询让这一切成为可能，它就相当于CSS中基本的条件逻辑。

3.2 css2中的媒体查询

在CSS2中，媒体查询只使用于style和link标签中，以media属性存在；media属性用于为不同的媒介类型规定不同的样式

<style media="screen,tv">
<link ref="stylesheet" href="demo.css" media="screen">Copy to clipboardErrorCopied

3.3 媒介类型

all           适合所有设备
screen         计算机屏幕（默认值） 
print          打印预览模式 / 打印页   
tty            电传打字机以及使用等宽字符网格的类似媒介
tv             电视类型设备（低分辨率、有限的屏幕翻滚能力）
projection     放映机
handheld       手持设备（小屏幕、有限的带宽）
braille        盲人 用点字法反馈设备
aural          语音合成器Copy to clipboardErrorCopied

<style media="screen,tv">
.box{
    height: 100px;
    width: 100px; 
    background-color: lightblue;
}    
</style>
<div class="box"></div> Copy to clipboardErrorCopied

3.4 媒体特征

媒体查询支持丰富的设备特征，除了我们最常看到的宽度和高度查询，还有一些其他的媒体特征比如方向、分辨率等对检测设备也很有用，更多常用的媒体特征详细信息可参考下表：

设备特征	取值	说明
width	长度数值，如600px	输出设备渲染区域（如可视区域的宽度或打印机纸盒的宽度）的宽度
height	长度数值，如600px	输出设备渲染区域（如可视区域的高度或打印机纸盒的高度）的高度
aspect-raido	整数或小数	viewport 宽高比，值为宽度/高度
orientation	portrait 或 landscape	设备处于横屏（宽度大于高度）模式还是竖屏（高度大于宽度）模式
resolution	数值	设备分辨率，如 300ppi
color	正整数	检查设备支持多少种颜色等
scan	progressive 或 interlace	输出设备的扫描方式，大部分现代屏幕使用 progressive 渐进式方式，部分等离子电视使用 interlace 隔行扫描
grid	0 或 1	判断输出设备是网格设备还是位图设备

另外，对于部分取值为数值的属性，媒体查询可以使用 min- 或 max- 前缀表示范围，这为媒体查询提供了更方便的判断方式。例如使用 max-width: 320px 表示设备 viewport 的宽度小于等于 320px，min-width: 321px 表示 viewport 宽度大于等于 321px。

@media (max-width: 320px) { /* viewports <= 320px 时的样式*/ }
@media (min-width: 321px) { /* viewports >= 321px 时的样式*/ }Copy to clipboardErrorCopied

3.5 逻辑条件

通过使用 and、not、only 等逻辑条件关键词，可以组合多个媒体查询条件。

and:
@media (min-width: 700px) and (orientation: landscape) { ... }
上面的示例是宽度大于 700px 的媒体查询条件，如果你只想在横屏情况时使用这个条件，可以如下所示使用 and 操作符来合并媒体属性。Copy to clipboardErrorCopied

not 和 only:
使用 not 可以不在某种条件下使用当前媒体查询规则，如以下示例中媒体查询匹配 viewport 宽度大于 320px 且不是打印机的设备。
可以用关键字not表示一个否定查询；not必须置于查询的一开头并会对整条查询串生效，除非逗号分割的多条

@media not print and (min-width: 320px) { ... }

而使用 only 可以仅在某种条件下使用规则，如示例中仅在 viewport 宽度大于 320px 的屏幕设备中使用。
@media only screen and (min-width: 320px) { ... }Copy to clipboardErrorCopied

3.6使用媒体查询设置断点

如何选择网站内容的响应点，即如何选择不同 viewport 的 min-width 和 max-width 的取值，我们称为选择断点。在设计断点时，可以从最小支持的屏幕宽度开始，逐渐增加屏幕宽度，覆盖不同尺寸屏幕的体验。断点的设置主要取决于产品设计本身，没有万能媒体查询的代码。但经过实践，总结了一套比较具有代表性的设备断点，代码如下：

/* 很小的设备（手机等，小于 600px） */
@media only screen and (max-width: 600px) {...}
/* 比较小的设备（竖屏的平板，屏幕较大的手机等, 大于 600px） */
@media only screen and (min-width: 600px) {...}
/* 中型大小设备（横屏的平板, 大于 768px） */
@media only screen and (min-width: 768px) {...}
/* 大型设备（电脑, 大于 992px） */
@media only screen and (min-width: 992px) {...}
/* 超大型设备（大尺寸电脑屏幕, 大于 1200px） */
@media only screen and (min-width: 1200px) {...}Copy to clipboardErrorCopied

3.7 Media Queries Level 4规范中新的媒体特性

update – 根据设备的更新频度区分其类型 (none 如打印机, slow 如电子墨水, fast 正常设备)
scripting – none 不支持脚本或未启用 | initial-only 仅支持页面初始化脚本 | enabled 支持脚本并且已启用
pointer – 设备交互的精度 (coarse不精确如手指, fine 精确如鼠标, none 无指点)
hover – 设备是否支持悬停状态Copy to clipboardErrorCopied

3.8 CSS3的媒体查询

• 媒体查询最基本的形式，就是单独或组合使用媒体类型和媒体特性(后者要置于括号中)，如

@media screen {
    body {
        font-size: 20px;
    }
}

@media screen, print {
    body {
        font-size: 20px;
    }
}

@media (width: 30em) {
    nav li {
        display: block;
    }
}

@media screen and (width: 30em) {
    nav li {
        display: block;
    }
}Copy to clipboardErrorCopied

• 引入外部文件时的媒体查询

  <!--即使媒体查询不符，样式文件总会被下载-->
  <link rel="stylesheet" href="styles.css" 
      type="text/css" media="screen x-width: 480px)">Copy to clipboardErrorCopied

3.9 媒体查询的嵌套

@media screen {
    @media (min-width: 20em) {
        img {
            display: block;
            width: 100%;
            height: auto;
        }
    }
    @media (min-width: 40em) {
        img {
            display: inline-block;
            max-width: 300px;
        }
    } 
}
Copy to clipboardErrorCopied

3.10 less书写媒体查询

*{
  margin: 0;
  padding: 0;
}

#box{
  width: 200px;
  height: 200px;
  background-color: red;
  @media screen and (max-width: 768px){
    background-color: yellow;
  }
}