一个网页可以用几个css样式表（如何让网页更机智地）

媒体查询

响应式网页是这几年很流行的网页风格之一，他能够以一套网页代码，面对不同的条件，例如改变浏览器的宽度，手机横竖屏，作出不同的样式调整。

一套代码走天下

最出名的响应式框架是Bootstrap，来自Twitter。也是每个刚入门前端开发师必学的框架，利用这个框架可以很轻松实现响应式效果。

面对不同的浏览器宽度，作出界面调整

要实现响应式，关键在于使用媒体查询 Media！

@media （媒体特性）and （媒体特性） {你的样式}

看起来好像很复杂，先看完整的代码

@media(max-width:480px){ body{background-color:green} }

上面这句话的意思，浏览器的宽度小于或等于480px时，背景颜色是绿色。

再来多一个，如下

@media(min-width:481px){ body{background-color:red} }

上面这句话的意思，浏览器的宽度大于或等于481px时，背景颜色是红色。

媒体特性

媒体特性就是依据什么样的条件来进行更改样式，是根据屏幕宽度大小、还是横竖屏呢。这些条件都是官方定的，非常多。但实际上，真正有用的就是 min-width和max-width，根据浏览器宽度来设定不同的样式。

这里会很容易混淆min-width和max-width的意义。min-width表示大于等于，max-width表示小于等于。

@media(max-width: 500px) { /** 窗口宽度小于等于500像素的样式 **/ }

@media(min-width: 800px) { /** 窗口宽度大于等于800像素的样式 **/ }

当有多个媒体特性时，用and连接，就可以形成一个区间范围

@media(min-width: 600px) and (max-width: 700px) { /** 窗口宽度在600-700像素的样式 **/ }

这就是他最基本的用法，凡是有两面性，下面来说说他的优缺点。

优点

（1）面对不同分辨率设备灵活性强

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

缺点

（1）兼容各种设备工作量大，效率低下

（2）代码累赘，会出现隐藏无用的元素，加载时间加长

全局布局

下面这种响应式布局最为常见，通过媒体查询定义不同的样式，让其能够适应手机浏览器和桌面浏览器：

1、电脑端大屏幕下，网页元素全部展示

电脑端样式

2、手机端下，因为屏幕有限，只能让主体内容呈现出来，其余部分隐藏起来，并且让字体缩小。

手机端样式

栅格布局

一提起响应式，绝对离不开强大的栅格布局，根据浏览器的宽度，设置容器不同的列宽。

<divclass="row"> <divclass="col-xs-12 col-sm-6 col-md-8"></div> <divclass="col-xs-12 col-sm-6 col-md-8"></div> </div>

只需要按照填写bootstrap参数，即可匹配不同的宽度

栅格布局的原理其实也是利用了媒体查询，这样你就可以自定义一份自己的栅格布局。

部分源代码

总结