深入剖析响应式布局的原理

说到响应式布局，相信大家都有一定的了解，响应式布局是今年很流行的一个设计理念，随着移动互联网的盛行，为解决如今各式各样的浏览器分辨率以及不同移动 设备的显示效果，设计师提出了响应式布局的设计方案。今天就和大家来讲讲响应式布局这件小事，包含什么是响应式布局、响应式布局的优点和缺点以及响应式布 局该怎么设计（通过CSS3 Media Query实现响应布局）。　　

响应式布局顾名思义就是随电脑屏幕的大小而改变，响应式布局就是用不同的终端来查看页面，可以根据不同的大小来显示页面。响应式布局又优点，也有缺点，优点是：面对不同分辨率设备灵活性强。能够快速解决多设备显示适应问题。缺点：兼容各种设备工作量大，效率低下，代码累赘，会出现一些隐藏无用的元素 ，加载时间长，响应式布局也是一种程度上折衷性质的设计解决方案，多方面因素影响而达不到最佳效果，一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。这就是响应式布局。

首先我们先认识一下什么是 media属性吧

@media screen and (min-width: 320px) and (max-width : 479px)

就从这个条件语句开始介绍，media属性后面跟着的是一个 screen 的媒体类型（上面说过的十种媒体类型之一）。然后用 and 关键字来连接条件，然后括号里就是一个媒体查询语句，稍微懂点css的同学都能看懂，这个条件语句意思是在大于320小于479 的分辨率下所激活的样式表。

这个语句就是响应式布局的基础应用了，在给它赋予不同的值就能在不同的大小屏幕上显示了。 我们在上面了解了什么是响应式布局，那在我们的实际项目中应该怎么去设计呢?在以往我们设计网站的时候都会受到不同浏览器的兼容性的困扰，现在还要来个不同尺寸设备，我们该怎么淡定下来呢?有需求就会有解决方案，呵呵，说到响应式布局，就不得不提起CSS3中的Media Query（媒介查询），这可是个好东西，易用、强大、快捷……Media Query是制作响应式布局的一个利器，使用这个工具，我们可以非常方便快捷的制造出各种丰富的实用性强的界面。接下来就一起来深入的了解Media Query。通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于。如：width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。所以使用响应式媒体对象，就一定要学会meidia query查询。

所以响应式布局在html中是一个非常一个不错的设计理念，响应式布局给大家带来了许多的方便，让大家在不同的设备中也能看一些页面。