博客

响应式布局

前言

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

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

一. 什么是响应式

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

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

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

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

二. 响应式的三个特征

1.媒体查询

“媒体查询不是针对某些设备，而是检查设备在渲染我们作品时的物理特性,”

媒体允许开发人员基于用户的设备的属性使用条件检查改变网页设计。

2.流动布局

无论用户使用的是21寸桌面计算机、13英寸笔记本电脑、9.7英寸的平板电脑、或5.5英寸的手机，使用CSS创建灵活的网格时，列自动重新调整自己以适应屏幕的大小或浏览器窗口。

“流体布局就是将设计的主控权放在用户和他们的浏览习惯里”

这使得设计师能够跨多个设备保持一致的外观和感觉。另外，它可以节省大家的时间和金钱允许设计师来更新网站的一个版本或多个版本。

3.灵活的视觉效果

鉴于有超过8.48 B独特的设备存在的今天，此功能允许团队创建适于任何设备永不过时的设计，不管其大小或形状。

三. 什么时候用到响应式

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

四. 媒体查询

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

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

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

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

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

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

2.css2中的媒体查询

在CSS2中，媒体查询只使用于

style

和

link

标签中，以media属性存在；media属性用于为不同的媒介类型规定不同的样式

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

3.媒介类型

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

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

4.媒体特征

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

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

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

5.逻辑条件

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

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

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

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

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

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) {...}

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

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

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;
    }
}

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

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

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;
        }
    } 
}

10.less书写媒体查询

*{
  margin: 0;
  padding: 0;
}

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