有48人阅读过
css 通过@media 控制不通屏幕宽度显示不一样的布局
发布于2022/04/18 更新于2024/05/07
[ 教程仅保证更新时有效，请自行测试。]
发布于2022/04/18 更新于2024/05/07
[ 教程仅保证更新时有效，请自行测试。]
[ 教程仅保证更新时有效，请自行测试。]
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
body{
background: green;
} //默认是不限宽度，适用于大屏，电脑等设备横屏
@media screen and (max-width:992px){ //先写宽的，包含窄的，中屏幕默认992，平板等设备竖屏
body{
background: yellow;
}
}
@media screen and (max-width: 768px) { //再写窄的，覆盖宽的定义，下屏幕默认768，手机等设备竖屏
body{
background: red;
}
}
</style>
<body>
<div class="main">
</div>
</body>
</html>
文章对你有帮助吗？
- 一般[0]
- 很赞[0]
- 没用[0]
- 垃圾[0]
- 无语[0]
