Css3媒体查询使用
css3媒体查询技术的出现，在多设备支持上为我们提供了解决方案。 媒体查询的使用方法： @media screen and (max-width: 480px) { .col-xs-1{width: 8.333333333333332%; float:left;} .col-xs-2{ width: 16.666666666666664%; float:left;} .col-xs-3{ width: 25%; float:left;} } 在设备窗口宽度小于480时，下面的样式会被采用，不满足这个查询设置，下面定义的css是无效的，html根本就不会识别到。 简单理解就是，如果当前宽度是1000，那么就是div上有类名.col-xs-1，div还是只是简单块元素（不会浮动和宽为百分比），查询的设置是不起作用的。 充分利用媒体查询，实现多设备支持的框架当前最热门就是bootstrap了，我们可以学习和使用它进行开发。 下面是我自己利用媒体查询写的实例页面，都是常用css布局方式配合了媒体查询，多的就不做解释了，一句话就是写法都是css里面，看看就能懂： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>media/媒体查询/简易UI</title> <!--设备设置--> <meta name="viewport