响应式布局

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中将会被编译为：

是否是特别方便？