响应式布局

响应式布局：

简单点说，就是做一个网站同时能兼容多个终端，由一个网站转变成多个网站，为我们大大节省了资源。

响应式布局的优缺点

优点：1.面对不同分辨率设备灵活性强

         2.能够快捷解决多设备显示适应问题

缺点：不能完全兼容所有浏览器，代码累赘，加载时间加长。

 

原理：响应式布局它是通过CSS中Media Query（媒介查询）@media功能，来判断我们的终端设备宽度在多少像素内，然后就执行与之对应的CSS样式。

下面就来看一下我最近做的一个响应式布局的框架：

 代码如下：

 

 

 

 通过上面代码可知：它是通过@media媒介查询判断来执行的CSS样式，也就是说：如果我要做一个响应式布局网站，同时兼容手机、平板、PC的话就得写三个与之对应的CSS样式，通过@media媒介查询来完成响应式布局。