响应式布局的定义

给所有用户提供同一份HTML和CSS。通过几个关键性的技术，根据用户浏览器视口的大小（或者屏幕分辨率）让内容有不一样的渲染结果。这种方式不需要分别维护好几个网站，只需要创建一个网站就可以在智能手机、平板电脑、或者其他设备上运行。

响应式布局的三大原则

移动优先

移动优先指的是在实现桌面布局之前先构建移动端的布局，因为移动端网页有很多限制，比如屏幕空间小，网络速度慢，用户跟网页的交互也不一样，打字很别扭，也没有鼠标可以使用，所以移动端做好之后使用“渐进增强”的方式来为大屏用户增加体验。

媒体查询

媒体查询允许某些样式只在页面满足特定条件的时候才生效，这样可以根据屏幕大小定制样式，可以针对小屏、中屏、大屏定义不同的样式，媒体查询使用@media规则选择满足特定条件的设备。一条简单的媒体查询规则如下：

1
2
3
4
5
6
@media (min-width: 560px){
  .title > h1 {
    font-size:2.25em;
  }
}
// 媒体查询断点推荐使用的是em单位，因为em在各大主流浏览器中当用户改变默认的字体大小时，em单位保持一致

在外层的大括号内可以定义任意的样式，@media会进行条件检查，只有满足所有的条件时才会将这些样式应用到页面元素上。媒体查询可以根据选择器的优先级或源码的顺序覆盖媒体查询外部的样式规则，也可能被外部的样式覆盖，媒体查询本身不会影响到媒体查询内部选择器的优先级。

媒体查询的类型

  1. 如果需要满足两个条件才能生效的话，可以用and关键字联合起来组成一个媒体查询，代码如下：
1
@media (min-width: 35em) and (max-width: 45em){ ... }
  1. 如果只需要满足多个条件中的一个就能生效的话，可以用逗号隔开
1
@media (max-width: 35em),(min-width: 45em){ ... }

min-width、max-width被称之为媒体特征。

媒体类型

常见的媒体类型有两个，一个是screen，另一个是print。针对打印样式使用@media print查询语句，不需要像min-width或者其他媒体特征那样加小括号才能实现，同理对于屏幕样式，也可以用@media screen。

当用户打印网页时，他们大多数都只会关心网页的主体内容，会设置类似如下的打印样式

1
2
3
4
5
6
@media print {
  *{
    color:black !important;
    background: none !important;
  }
}

响应式CSS的整体结构

移动端开发用得最多的是min-width，因为移动端样式不在媒体查询里，这些样式对所有断点都有效，然后是中等屏幕的媒体查询规则里基于移动端样式构建的会覆盖移动端的样式，最后是针对大屏幕的媒体查询，如下：

1
2
3
4
5
6
7
8
9
.tltle{
  ...   // 移动端样式对所有断点有效
}
@media (min-width:35em) {
  ...    // 中等屏幕的断点，覆盖对应的移动端的样式
}
@media (min-width: 50em) {
  ...   // 大屏幕的断点，覆盖对应的中等屏幕的样式
}

流式布局

流式布局，也称为流体布局（fluid layout），指的是使用的容器随着视口的宽度发生变化，与固定布局相反，固定布局的列都是用px或者em单位定义的。