极客观点
项目管理
HarmonyOS
缩放到xxx宽度时显示d1, 隐藏d2
缩放到xxx宽度时显示d2, 隐藏d1
可以使用bootstrap版本4或5
缩放宽度和div大小可以任意规定, 能看到效果就行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#d1,
#d2 {
width: 300px;
height: 300px;
}
#d1 {
background-color: red;
}
#d2 {
background-color: blue;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>是这样写吗? 运行没有效果
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#d1,
#d2 {
width: 300px;
height: 300px;
}
#d1 {
background-color: red;
}
#d2 {
background-color: blue;
}
@media screen and (min-width: 1000px) #d1 {
display: none;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
刚刚找到原因了, 语法没写对
@media screen and (max-width: 1000px) {
body{
background-color: green;
}
#d1{
display: none;
}
}
用
@media媒体查询