HTML5 媒体查询

最新推荐文章于 2021-08-19 16:33:12 发布

iteye_17658

最新推荐文章于 2021-08-19 16:33:12 发布

阅读量481

点赞数

分类专栏：境-H5 文章标签： html5 csss3 媒体查询 media

境-H5 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

浏览器支持：

style.css

/* CSS Document */
.test{ width:100%; height:400px;}

/*下面的样式会在可视区域的宽度小于 599px 的时候被应用。*/
@media screen and (max-width: 599px) {
  .test {
    background: #f60;
  }
}
/*下面的样式会在可视区域的宽度大于 901px 的时候被应用。*/
@media screen and (min-width: 901px) {
  .test {
    background: #06f;
  }
}
/*你还可以使用过个匹配条件，下面的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。*/
@media screen and (min-width: 600px) and (max-width: 900px) {
  .test {
    background: #f06;
  }
}

demo.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>CSS3 媒体查询</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="test">
</div>
</body>
</html>

demo2.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="basic.css">
<link rel="stylesheet" media="screen and (max-width: 599px)" href="max599.css" />
<link rel="stylesheet" media="screen and (min-width: 600px) and (max-width: 900px)" href="min600max900.css" />
<link rel="stylesheet" media="screen and (min-width: 901px)" href="min901.css" />
<title>CSS3 媒体查询</title>
</head>
<body>
<div class="test">
</div>
</body>
</html>

效果图：