您的位置：首页 > 产品设计 > UI/UE

CSS3 Media Queries 实现响应式设计

2014-11-26 14:46 826 查看

下面的样式会在可视区域的宽度小于 600px 的时候被应用。

如果你想链接到一个单独的样式表，把下面的代码放在<head>标签里。

下面的样式会在可视区域的宽度大于 900px 的时候被应用。

你还可以使用过个匹配条件，下面的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。

下面的样式会在 max-device-width 是 480px 的设备上触发。（提示：max-device-width 是设备的实际分辨率，而 max-width 指的是可视区域分辨率。）

下面的样式是为 iPhone 4 专门写的 (作者: Thomas Maier)。

你还可以使用 media query 在 iPad 上检测方向(portrait or landscapse) (作者: Cloud Four)。

遗憾是的，IE8 及更老版本的浏览器不支持 CSS3 Media Queries，不过可以使用 Javascript 弥补，下面是一些解决方案：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航