<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>媒体查询 media</title>
<meta name="Keywords" content="关键字">
<meta name="description" content="简介">
<style>
.box {
width: 1000px;
background-color: deepskyblue;
}
.box:after {
content: '默认';
}
@media screen and (width: 800px) {
.box {
background-color: aqua;
}
.box:after {
content: '800px';
}
}
@media screen and (min-width: 960px) {
body {
background-color: green;
}
}
@media screen and (max-width: 375px) {
.box {
background-color: greenyellow;
}
.box:after {
content: '手机端375px';
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
CSS 媒体查询 media
最新推荐文章于 2024-08-28 23:58:56 发布