响应式布局上篇

响应式布局

响应式布局

什么是响应式布局 如何实现响应式布局常见的视口尺寸

在Sass中使用媒体查询

 

什么是响应式布局

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站可以兼容多个终端，而不是为每一个终端作一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局能够为不一样终端的用户提供更加温馨的界面和更好的用户体验，并且随着目前大屏幕移动设备的普及，愈来愈多的设计师采用这个技术。

一个典型的响应式布局网站：http://www.16ketang.com/ 试着逐渐缩小该页面的窗口，看看网页有什么变化

如何实现响应式布局

因为响应式布局要针对不一样的视口尺寸，对样式做出更多的修改，所以并不像流式布局那样让宽度自动适应那么简单。

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

媒体查询是CSS3引入的概念，是指针对不一样的设备、不一样的视口尺寸，使用不一样的样式代码。媒体查询的书写格式以下：

 

下面是一个简单的媒体查询的例子：

 

 

 

 

上面的代码应该这样阅读：

1. 有一个样式规则 .item
2. 若是当前的视口尺寸大于等于1200px，则再加入一个样式规则 .item
3. 若是当前的视口尺寸大于等于992px，而且小于1200px，则再加入一个样式规则 .item

能够想象，若是视口的尺寸当前是1500px，则页面中会存在两个类样式 .item ，一个想将背景设置为红色，一个想将背景设置为蓝色，固然，此时就会进入层叠的规则解决冲突，那就是CSS的基础 知识了。这里主要是要说明，媒体查询中的样式规则，会根据视口大小来决定要不要启用这些规

则。

响应式布局的原理，正是大量的使用媒体查询，让页面中一些元素在不一样的视口中具备不一样的样式表现。

 

常见的视口尺寸

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

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

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

视口尺寸和设备关系表

 

视口	设备
≥1200px	大屏幕：投影仪 电视 PC端
≥992px && <1200px	中等屏幕：上网本、小型笔记本

 

≥768px && <992px	小屏幕：平板
<768px	超小屏幕：手机

 

根据上述的关系表，再结合你网站的实际状况，就能够很容易的得出你须要编写的媒体查询代码。好比，个人网站只考虑两种状况：

1. 手机端显示一种风格
2. 其余设备共享一种风格

那么对某个须要响应式布局的元素，个人CSS代码应该相似下面的格式：

 

 

在Sass中使用媒体查询

开发一个实际的项目时，咱们一般会选择一些预编译器来处理咱们编写的CSS源代码，好比

SASS。不少预编译器都对媒体查询有很好的支持。

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

下面以一个例子，说明在SASS中是如何使用媒体查询的：

 

 

编译为：