CSS media queries

2024-07-11 08:28:27

字体：大中小

来源：转载

供稿：网友

最近在做一些页面打印时的特殊处理接触到了media queries，想系统学习一下，在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错，结合自己的使用总结一下。

CSS2/media

在CSS2中可以使用media属性可以使特定style只在指定媒体类型下其作用,比如页面有些部分需要在打印的时候隐藏或者变大，这时候可以使用media使某些style只在打印的时候生效

复制代码

代码如下:
@media print {
/* 适用于印刷的样式 */
}

复制代码

代码如下:
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />

常用的媒体类型有

1.all（所有），适用于所有设备。
2.handheld（手持），用于手持设备。
3.print（印刷），用于分页材料以及打印预览模式下在屏幕上的文档视图。
4.projection（投影），用于投影演示文稿，例如投影仪。
5.screen（屏幕），主要用于计算机屏幕。
在使用的时候可以在样式表直接书写 @media指令+空格+媒体类型（多个都好隔开）

复制代码

代码如下:
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }parsing-errors
}
@media screen, print {
body { line-height: 1.2 }
}

CSS3/meidia queries

在CSS3中对其进行了增强，添加了更多的媒体查询，CSS3中的Media Queries增加了更多的媒体查询，同时可以添加不同的媒体类型的表达式用来检查媒体是否符合某些条件，比如如果网页用PC访问和Pad访问使用不同的style，在CSS2中只能把媒体类型设为screen是不能做到的，而在CSS3中可以对screen类型媒体设置表达式进一步判断屏幕大小来实现这一功能。可以写出这样的代码

复制代码

代码如下:

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /></p><p>
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>

当媒体类型匹配且表达式为真的时候，对应style就会其作用，除非使用not或者only操作符，否则媒体类型不是必需的，默认代表所有媒体类型。

操作符
and

and操作符用于将多个media feature组合成一个查询，同时用于组合media type 和media feature，一个基本的media query类似这样，一个meidia feature作用于所有media type

@media (min-width: 700px) { ... }

但是如果只想在横向显示时应用就可以使用and操作符把media type和media feature结合起来

上一篇：CSS——float属性及Clear:both备忘笔记

下一篇：CSS清除浮动使父级元素展开的三个方法