使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
<!DOCTYPEHTML>
<html>
<head>
<meta charset="utf-8">
<title>根据窗口尺寸选择不同的样式</title>
<meta name="viewport" content="width=620px" />
<style type="text/css">
* {
font-size:36px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
}
nav {
background-color:#0066ff;
height:260px;
}
section {
background-color:#f90;
height:260px;
}
aside {
background-color:#009900;
height:260px;
}
@media screen and (min-width:900px) {
nav {
float:left;
width:25%;
}
section {
float:left;
width:50%;
}
aside {
float:left;
width:25%;
}
}
@media screen and (min-width:600px) and (max-width:900px) {
nav {
float:left;
width:40%;
height:200px;
}
section {
float:left;
width:60%;
height:200px;
}
aside {
height:100px;
float:none;
clear:both;
}
}
@media screen and (max-width:600px) {
nav {
height:150px;
}
section {
height:150px;
}
aside {
height:150px;
}
}
</style>
</head>
<body>
<nav> Nav </nav>
<section>Section</section>
<aside>Aside</aside>
</body>
</html>
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="/assets/css/small-device.css" />
Processed:
0.011, SQL:
10
