媒体查询语法 上面例子我加在文章中了。您可以通过改变浏览器的大小可以看到效果（"标题"的背景颜色）至于 orientation介绍用模拟器Operamoblie
分类：
Web程序 时间：
2015-03-14 19:47:23
阅读次数：
157
Bootstrap是一个响应式的布局，你可以在宽屏电脑、普通电脑，平板电脑，手机上都得到非常优秀的布局体验。这种响应式的布局正是通过CSS3的媒体查询（Media Query）功能实现的，根据不同的分辨率来匹配不同的样式。IE8浏览器并不支持这一优秀的Css3特性，Bootstrap在开发文档中写了...
分类：
其他好文 时间：
2015-03-07 16:55:36
阅读次数：
25842
CSS Media Queries直译过来就是“媒体查询”，我们可以通俗易懂的理解为根据媒体设备展示不同的样式。例如，你可以把用于大屏幕上显示的样式和用于移动设备的专用样式放在一个样式文档中，这样，在不改变文档内容的情况下，不同的设备可以呈现不同的界面外观。看下这个在线演示，调整你的浏览器窗口尺寸，...
分类：
Web程序 时间：
2015-02-26 18:08:20
阅读次数：
248
respond.min.js 用于解决 ie6-ie8媒体查询 兼容问题；1、 需把文件置于服务器上，iis下运行2、包含媒体查询的 css文件需 采用外链形式3、头部引用的respond.min.js 需置 于css 文件之后；4、头部引用的respond.min.js 文件必须放在本html页内...
分类：
Web程序 时间：
2015-02-11 18:32:59
阅读次数：
183
随着pc、移动设备的屏幕规格增多、增大，当前，依据使用Media Query在不同的条件下使用不同的样式，使页面达到不同的渲染效果，可以有效的解决各种屏幕分辨率下的用户体验及移动web开发多种需求。Media Queries（媒体查询）：作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的...
分类：
Web程序 时间：
2015-02-11 18:09:23
阅读次数：
380
iPhone的CSS3媒体查询： 各版本的iPhone媒体查询是根据其分辨率和一些CSS3媒体查询的特性来实现媒体查询的...详见下：iPhone6的媒体查询：@media only screen and (min-device-width: 375px) and (max-device-widt....
分类：
Web程序 时间：
2015-02-10 14:50:31
阅读次数：
172
如今试图解决android平板的屏幕分辨率问题，眼下主要想到的办法是採用响应式设计和媒体查询，发现不管使用那种方式，工作量都非常大，调试都困难，悲催啊。 CSS的媒体查询尽管在传统的互联网页面可能发挥的余地不是非常大，可是自从苹果和安卓的风靡之后，移动平台上的web开发变得越来越流行了，同一...
分类：
移动开发 时间：
2015-02-06 11:06:26
阅读次数：
144
固定布局经不起未来考验固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。但这种方法不是一种完全兼容未来网页的制作方法，我们需要一些适应未知设备的方法。为什么响应式设计需呀百分比布局仅使用媒体查询来适应不同视口的固定宽度设计，只会从一组CSS媒体查询规则突变到另一组，两者间没有任何平滑渐变。我们...
分类：
其他好文 时间：
2015-02-03 13:08:02
阅读次数：
151
实现原理
网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。
在使用的时候大家可以根据实际情况重新编译LESS（或Sass）源码来修改12这个数值（也就是换成24或32，当然你也可以分成更多，但...
分类：
其他好文 时间：
2015-02-01 14:50:43
阅读次数：
274
1.媒体类型HTML 4和CSS 2目前支持为不同的媒体类型设定专有的样式表, 比如, 一个页面在屏幕上显示时使用无衬线字体, 而在打印时则使用衬线字体, screen 和 print 是两种已定义的媒体类型, 媒体查询让样式表有更强的针对性, 扩展了媒体类型的功能;2.媒体特性检测媒体查询由媒体类...
分类：
Web程序 时间：
2015-01-23 16:09:17
阅读次数：
140
