响应式布局

1.概念

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。

这个概念是为解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，越来越多的设计师采用这个技术。

（虽然我们一般不使用响应式布局，也不喜欢使用响应式布局，但终究会在某些地方用到。）

2.如何实现响应式布局

由于响应式布局要针对不同的视口尺寸，对样式作出更多更繁杂修改，因此并不像流式布局那样让宽度自动适应那么简单。

实现响应式布局最核心的技术就是使用媒体查询（media selector）。

媒体查询是CSS3引入的概念，是指针对不同的设备、不同的视口尺寸，使用不同的样式代码。

其中：1200px一般为pc端的视口宽度

使用@media screen and （最大/最小-width:数值）{内容}

这可以解决一个问题：

那就是不同视口宽度下，页面显示格式相近不同，显得更加多元化一些。

3.常见的是口尺寸

虽然你现在知道了如何使用媒体查询，但我们真正关心的，是页面在手机、平板、上网本或小型笔记本、PC端等等中具有更好的表现力。

但问题是手机型号众多，其他设备也是如此，它们的尺寸不尽相同，我们如何来判定当前的视口尺寸属于什么设备呢？

好在经过大量的实践应用，开发者已经总结了一套普遍的适用规则，按照这套规则，你就可以将视口尺寸和具体设备对应起来。

 

根据上述的关系表，再结合你网站的实际情况，就可以很容易的得出你需要编写的媒体查询代码。

其实：一般情况下，我们的网站只考虑两种情况：

1. 手机端显示一种风格

2. 其他设备共享一种风格

所以只需要选择是>768px，还是<768px的宽度就可以了，是不是简单化了一些？

提示：开发一个实际的项目时，我们通常会选择一些预编译器来处理我们编写的CSS源代码，比如SASS。很多预编译器都对媒体查询有很好的支持。

Sass 中 @media 指令与 CSS 中用法一样，而且还增加了一点额外的功能：允许其在 CSS 规则中嵌套。如果 @media 嵌套在 CSS 规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的父选择器。这个功能让 @media 用起来更方便，不需要重复使用选择器，也不会打乱 CSS 的书写流程。

Sass使用事例：

它在CSS中将会被编译为：

是不是特别方便？