html - 媒体断点没有正确应用,可能很简单
问题描述
我的媒体断点没有按应有的方式应用。我整理了一个简化的例子来演示。
在下面的示例中,div“myDiv”应为:
- “正常宽度”,当没有应用媒体断点时
- “mw1200”,当屏幕的最大宽度为 1200 像素时
- “mw992”,当屏幕的最大宽度为 992 像素时
- “mw768”,当屏幕的最大宽度为 768px
相反,当最大宽度超过 1200 像素时,它正在读取“正常宽度”,当低于 1200 像素时,它正在读取“mw1200”。
.myContainer {
position: absolute;
top: 100px;
left: 100px;
color: #FFF;
background-color: #000;
padding: 10px;
width: auto;
height: auto;
}
.myDiv {
padding-left: 10px;
padding-right: 10px;
}
.myDiv:after {
content: 'normal width';
}
@media screen and (max-width:768px) {
.myDiv:after {
content: 'mw768';
}
}
@media screen and (max-width:992px) {
.myDiv:after {
content: 'mw992';
}
}
@media screen and (max-width:1200px) {
.myDiv:after {
content: 'mw1200';
}
}
<div class="myContainer">
<div class="myDiv">
myDiv inside myContainer
</div>
</div>
解决方案
我可能会重构它并首先使用移动设备。您可以执行以下操作:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.myContainer {
position: absolute;
top: 100px;
left: 100px;
color: #FFF;
background-color: #000;
padding: 10px;
width: auto;
height: auto;
}
.myDiv {
padding-left:10px;
padding-right:10px;
}
.myDiv:after {
content: 'mw768';
}
@media screen and (min-width: 769px) {
.myDiv:after {
content: 'mw992';
}
}
@media screen and (min-width: 993px) and (max-width: 1200px) {
.myDiv:after {
content: 'mw1200';
}
}
</style>
</head>
<body>
<div class="myContainer">
<div class="myDiv">
myDiv inside myContainer
</div>
</div>
</body>
</html>
这样,您将使用更少的代码来实现基本相同的目标。
推荐阅读
- mysql - SQL:向数据库表添加新的主键列
- python - Pandas DataFrame - 将 NULL 字符串替换为空白,将 NULL 数字替换为 0
- windows - Set-ADAccountPassword 更改密码 + Set-ADUser 下次登录时更改密码
- javascript - 如何在另一个函数中获取firebase生成的行数据
- javascript - 如何在 MEAN 堆栈中设置 HTTP 标头键/值对
- javascript - 制作 Javascript 简单的幻灯片
- php - Php - 这个 %7Barticle-%3Eid%7D 在 Codeigniter Php 中是什么意思
- r - 看起来像融化数据的 data.frame 上的 Facet_wrap
- mysql - SQL 中的高级循环
- javascript - 如何在本机反应中向堆栈图表添加褪色背景