@media only screen and

only(限定某种设备)

screen 是媒体类型里的一种

and 被称为关键字，其他关键字还包括 not(排除某种设备)

/* 常用的媒体类型 */

类型 解释

all 所有设备

braille 盲文

embossed 盲文打印

handheld 手持设备

print 文档打印或打印预览模式

projection 项目演示，比如幻灯

screen 彩色电脑屏幕

speech 演讲

tty 固定字母间距的网格的媒体，比如电传打字机

tv 电视

screen一般用的比较多，下面是我自己的尝试，列出常用的设备的尺寸，然后给页面分了几个尺寸的版本。

/* 常用设备的屏幕大小 */

设备 屏幕尺寸

显示器 1280 x 800

ipad 1024 x 768

Android 800 x 480

iPhone 640 x 960

两种使用media的方法

1：<linkrel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">

意思是当屏幕的宽度大于600小于800时，应用styleB.css

2：@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/

.class {

background: #ccc;

}

}

device-aspect-ratio

device-aspect-ratio可以用来适配特定屏幕长宽比的设备，这也是一个很有用的属性。

比如，我们的页面想要对长宽比为4:3的普通屏幕定义一种样式，然后对于16:9和16:10的宽屏，定义另一种样式，比如自适应宽度和固定宽度：

@media only screen and (device-aspect-ratio:4/3)

min-resolution:144dpi

使用于：位图媒体类型,接受max/min前缀：“resolution”媒体特性描述输出设备的分辨率，例如，像素密度。若查询设备的非方形像素，在“min-resolution”查询中指定的值必须与最稀疏尺寸进行比较，在“max-resolution”查询中必须与最密集尺寸进行比较。对于“resolution”（没有“min-”或“max-”前缀）查询从不查询设备的非方形像素。

对于印刷机，相当于分辨率（任意颜色的绘制点的分辨率）。

举例说明：该媒体查询表示样式表适用于分辨率大于每英寸144点的设备：

@media print and (min-resolution: 144dpi) { … }

在这篇文章中我尝试解开媒体查询的迷雾。首先是名词解析：

width: 通常指代视口宽度；另外width和device width的区别在于，device width指代是屏幕的物理宽度。比如iphone5的屏幕分辨率是1136×640，竖屏时device width是640，横屏时是1136。通常，移动设备的浏览器都是全屏的，所以一般情况下width等于device-width。但是height和device-height的情况不一样（浏览器上方的地址栏和下方的工具栏有可能不算进视口高度）。鉴于一般媒体查询不采用height，所以本文所有例子全部使用width，指代width的像素全部加粗便于理解。

规则1： @media only screen and (min-width: 330px) {…}指「width大于或者等于min-width，采用{…}的样式」

所以，如果width是320px，这条规则返回false；返回false的媒体查询规则会直接被浏览器过滤掉，不会渲染这条规则中的CSS样式。这种情况翻译过来就是：

「如果320px大于等于330px，采用{…}的样式」

问题1：有width为310px, 320px, 330px, 340px, 350px的视口，哪些视口会采用以上规则（指代规则1中{…}的CSS样式）？

规则2： @media only screen and (max-width: 330px) {…}指「width小于或者等于max-width，采用{…}的样式」

如果width是320px，这条规则会返回true，浏览器会解析这段规则中的CSS样式。这种情况翻译过来就是：

[如果320px小于或者等于330px，采用{…}的样式」

问题2：有width为310px, 320px, 330px, 340px, 350px的视口，哪些视口会采用以上规则（指代规则2中{…}的CSS样式）？

这条规则会更加容易理解，简单解释就是：视口宽度在min-width和max-width之间的，都会采用这条规则。

规则3：@media only screen and (min-width: 330px) and (max-width: 350px) {…}如果width为340px, 这条规则返回true。翻译过来就是：

「如果340px在330px和350px之间，采用{…}的样式」

问题3：有width为310px, 320px, 330px, 340px, 350px的视口，哪些视口会采用以上规则（指代规则3中{…}的CSS样式）？

实例：

body { background-color: gray; }

@media screen and ( max-width: 960px ) { body { background-color: red; } }

@media screen and ( max-width: 768px ) { body { background-color: orange; } }

@media screen and ( max-width: 550px ) { body { background-color: yellow; } }

@media screen and ( max-width: 320px ) { body { background-color: green; } }

这条规则翻译过来就是:

1. 显示灰色背景；

2. width为0-960px的，显示红色背景；

3. width为0-768px的，显示橙色背景；

4. width为0-550px的，显示黄色背景；

5. width为0-320px的，显示绿色背景；

需要提醒一下的是CSS的优先级概念，在样式表中越后的样式优先级越高，就是后面的样式会覆盖前面的样式。在这个例子中，我们先设定了默认颜色为灰色。如果width大于960px的，会显示灰色。

假设width为750px，会先匹配到灰色，再匹配红色，最终显示了橙色。由于width等于750px，它不在0-550px和0-320px这个范围，浏览器不会解析这些样式。

发布时间: 5年前【网页相关】141人已围观【返回】【回到顶端】

转载：个人转载请注明文章出处 "www.itarticle.cc-IT技术类文章收集&分享"。

很赞哦！ (1)