css2中的媒体查询
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<link rel="stylesheet" href="./01.css" media="tv">
<style media="tv">
.box {
background-color: green;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
css3中的媒体查询
<style>
.box {
width: 100px;
height: 100px;
/* css3中的媒体查询不能直接给某个属性设置,而是设置给选择器 */
/* @media screen {
background-color: red;
} */
}
@media screen {
.box {
background-color: yellow;
}
}
@media tv {
.box {
background-color: pink;
}
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
媒体查询媒介类型特征
<style>
.box {
width: 100px;
height: 100px;
}
/* @media (min-width: 500px) {
.box {
background-color: yellow;
}
}
@media (max-width: 500px) {
.box {
background-color: red;
}
} */
@media (orientation: landscape) {
.box {
background-color: rgb(112, 112, 108);
}
}
@media (orientation: portrait) {
.box {
background-color: red;
}
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
媒体查询媒介逻辑
<style>
.box {
width: 100px;
height: 100px;
}
@media not screen and (orientation: landscape) {
.box {
background-color: rgb(112, 112, 108);
}
}
/* @media tv,
(orientation: portrait) {
.box {
background-color: red;
}
} */
</style>
</head>
<body>
<div class="box">
</div>
</body>
媒体查询的嵌套
<style>
.box {
width: 100px;
height: 100px;
}
/* @media screen and (orientation: landscape) {
.box {
background-color: rgb(112, 112, 108);
}
}
@media screen and (orientation: portrait) {
.box {
background-color: red;
}
} */
@media screen {
@media (orientation: landscape) {
.box {
background-color: rgb(112, 112, 108);
}
}
@media (orientation: portrait) {
.box {
background-color: red;
}
}
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
less中的媒体查询
.box {
width: 100px;
height: 100px;
@media screen and (orientation: landscape) {
background-color: rgb(112, 112, 108);
}
@media screen and (orientation: portrait) {
background-color: red;
}
}