css一直都支持设置与媒体相关联的样式表。它们可以适应不同媒体类型的显示。例如，文档在屏幕显示时使用sans-serif字体，在打印时则使用serif字体。screen和print是两种预定义的媒体类型。
在html4中，媒体样式表的写法是
<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css"><link rel="stylesheet" type="text/css" media="print" href="serif.css">
在css3中，媒体查询扩展了媒体类型的功能，至此更为精准的样式表标签，媒体查询由媒体类型和若干表达式组成，表达式负责检查特定媒体特性的条件。通过媒体查询，我们不需要修改网页内容，就可以使文档显示适应特定的输出设备。媒体查询是一个逻辑表达式，结果为true or false.如果媒体查询的媒体类型与用户客户端所在设备媒体类型相匹配，并且媒体查询的所有表达式都为真，那么它就返回真。
下面是一些媒体查询的例子：
<--!应用于支持指定特性（彩色）的特殊媒体类型（‘screen’）--><link rel="stylesheet" media="screen and (color)" href="example.css"><!--写在CSSd @import-rule语句中-->@import url(color.css) screen and (color);
有一种适用所有媒体类型的简写语法，其中关键字all和后面的and可以省掉。
立即学习“前端免费学习笔记（深入）”；
@media (orientation:portrain){...}@media all and (orientation:portrain){...}设计师和开发者可以使用这种方法创建出满足特殊需求的复杂查询：
@media all and (max-width:698px) and (min-width:520px),(min-width:1150px){ body{ background:#ccc;}}媒体查询的特性有很多，如下：
width和device-width;
height和device-height;
orientation;
aspect-ratio和device-aspect-ratio;
color和color-index;
monochrome(如果不是monochrome设备，则等于0)；
resolution；
scan;
grid(指输出设备为栅格型或位图型)。
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
937
收藏
