CSS3 Media Queries，前言装备查询
|
副问题[/!--empirenews.page--]
应承通过 media 属性为差异前言装备（如屏幕、打印机）指定专用样式表，而 CSS3 通过 media queries 使得更为行之有用。你可觉得前言范例添加某些查询前提用以检测装备，并回收差异的样式表。譬喻，你可以有一个大屏幕表现器的专用样式和一个移动装备的专用样式。这将很是强盛，由于它应承差异的装备行使差异的界面外面，但并不改变你的文档内容。阅读这篇文章来相识一下海外已经精采应用 media queries 的网站案例。
CSS3 Media Queries (演示稿) 最大宽度 假如可视地区宽度小于 600 像素，以下 CSS 将被应用。 Copy to Clipboard 引用的内容：[www.veryhuo.com]
@media screen and (max-width: 600px) { .class { background: #ccc; } } 假如你想要引入独立的样式表，可以在 <head> 标签对之间插入以下代码行。 Copy to Clipboard引用的内容：[www.veryhuo.com]
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
最小宽度 假如可视地区宽度大于 900 像素，以下 CSS 将被应用。 Copy to Clipboard引用的内容：[www.veryhuo.com]
@media screen and (min-width: 900px) { .class { background: #666; } } 多前言查询 你可以组合多个前言范例查询，假如可视地区宽度介于 600 像素至 900 像素，以下代码将被应用。 Copy to Clipboard引用的内容：[www.veryhuo.com]
@media screen and (min-width: 600px) and (max-width: 900px) { .class { background: #333; } } 装备宽度 假如装备最大宽度为 480 像素（如 iPhone），以下代码将被应用。注：最大装备宽度意味着装备的现实可视面积，最大宽度意味着可视地区面积。 Copy to Clipboard引用的内容：[www.veryhuo.com]
@media screen and (max-device-width: 480px) { .class { background: #000; } } iPhone 4 专用 以下代码为 iPhone 4 专用。（案例：Thomas Maier） Copy to Clipboard引用的内容：[www.veryhuo.com]
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
iPad 专用 你也可以行使 media queries 来检测 iPad 上横向纵向坐标。（案例：Cloud Four） Copy to Clipboard引用的内容：[www.veryhuo.com]
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> Internet Explorer 的 Media Queries 办理方案 1、CSS Tricks – using jQuery to detect browser size 案例站点 你必需在支持 media queries 的高级赏识器如 Firefox、Chrome、Safari 中赏识以下站点。看看跟着窗口尺寸改变时，这些页面机关是怎样相应的。 Hicksdesign 大尺寸： 三栏式侧边栏
Colly （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
