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

说到响应式布局，相信你们都有必定的了解，响应式布局是今年很流行的一个设计理念，随着移动互联网的盛行，为解决现在各式各样的浏览器分辨率以及不一样移动 设备的显示效果，设计师提出了响应式布局的设计方案。今天就和你们来说讲响应式布局这件小事，包含什么是响应式布局、响应式布局的优势和缺点以及响应式布 局该怎么设计（经过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中是一个很是一个不错的设计理念，响应式布局给你们带来了许多的方便，让你们在不一样的设备中也能看一些页面。