CSS媒体查询

最新推荐文章于 2024-06-27 18:04:42 发布

zsl6658

最新推荐文章于 2024-06-27 18:04:42 发布

阅读量9.3k

点赞数

分类专栏： web 技术移动互联网网络文章标签： css stylesheet xhtml html iphone query

本文链接：https://blog.csdn.net/shatty/article/details/6637021

版权

网络同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

web 技术

10 篇文章 0 订阅

订阅专栏

移动互联网

6 篇文章 0 订阅

订阅专栏

好长时间不是很清楚css的媒体查询是做什么的。今天看到一篇文章才搞明白了。通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适合相应的设备显示。看图：

看代码:

<head>

<link rel="stylesheet" href="smartphone.css" 
media="only screen and (min-device-width : 320px) 
and (max-device-width : 480px)">

<link rel="stylesheet" href="smartphone-landscape.css" 
media="only screen and (min-width : 321px)">

<link rel="stylesheet" href="smartphone-portrait.css" 
media="only screen and (max-width : 320px)">

<link rel="stylesheet" href="ipad.css" 
media="only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)">

<link rel="stylesheet" href="ipad-landscape.css" 
media="only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)">

<link rel="stylesheet" href="ipad-portrait.css" 
media="only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)">

<link rel="stylesheet" href="widescreen.css" 
media="only screen and (min-width : 1824px)">

<link rel="stylesheet" href="iphone4.css" 
media="only screen 
and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5)">

</head>

语法：

@media ：<sMedia> { sRules }

取值：

<sMedia>：

指定设备名称。请参阅附录：设备类型

{ sRules}：

样式表定义。

说明：

判断媒介(对象)类型来实现不同的展现。此特性让CSS可以更精确作用于不同的媒介类型，同一媒介的不同条件（分辨率、色数等等）.

media_query: [only | not]? <media_type> [ and <expression> ]*
expression: ( <media_feature> [: <value>]? )
media_type: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed
media_feature: width | min-width | max-width 
  | height | min-height | max-height
  | device-width | min-device-width | max-device-width
  | device-height | min-device-height | max-device-height
  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
  | color | min-color | max-color
  | color-index | min-color-index | max-color-index
  | monochrome | min-monochrome | max-monochrome 
  | resolution | min-resolution | max-resolution
  | scan | grid

上边是css3媒体查询的文档。

下边是一个更清楚的例子，拷贝下边的代码到一个html文件中，修改你的屏幕的分辨率的大小为800*600和1280*800.查看页面效果,你就更明白css媒体查询了.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>media queries</title>
</head>
<style>
div.example{background-color: #cee;}

@media all and (min-width: 640px) {
div.example {
background-color: #cff;
}
}
@media screen and (max-width: 1100px) {
div.example {
background-color: #c00;
}
}
</style>
<body>
<div class="example">
这是一个背景色例子 -_-!!!
</div>
</body>
</html>