html - 如何让以下媒体查询适用于 480 像素?
问题描述
我正在尝试css
对媒体查询最大宽度执行以下操作,480px
但出于某种奇怪的原因,没有任何效果。我的其他媒体查询很好,但对于这个特定的查询,没有任何改变。我认为 em480px
是30em
? 我已经包含了我的代码的一部分:
@media screen and (max-width: 480px) and (orientation: portrait) {
label {
width: 100%;
display: block;
position: relative;
}
.nav {
width: 200%;
}
#nav-icon {
font-size: 28px;
line-height: 50px;
padding-left: 1em;
color: #ffffff;
background-color: #f44336;
}
div.nav ul, div.nav li, label{
line-height: 50px;
margin: 0;
padding: 0 2em;
list-style: none;
text-decoration: none;
color: #000;
font-weight: 100;
width: 150%;
position: relative;
font-size: .9em;
}
div.header2_welcome h1{
text-align: center;
font-family: 'Pacifico', cursive;
font-size: 1.5em;
position: absolute;
top: 5em;
right: 0em;
text-decoration: none;
white-space: nowrap;
}
@media only screen and (max-width : 1200px) {
}
@media only screen and (max-width : 979px) {
}
@media only screen and (max-width : 767px) {
}
@media only screen and (max-width : 480px) {
}
@media only screen and (max-width : 320px) {
}
解决方案
对现有媒体查询使用 min-width
@media screen and (min-width: 320px and max-width: 480px) and (orientation: portrait) {
}
还要检查是否有任何 CSS 库覆盖了您的样式。如果是这样,请尝试在所有其他 css 文件之后加载此自定义 css
推荐阅读
- powerbi - 如何根据 PowerBI 中的另一行对行求和?
- c++ - 如何连接 QT 和 MariaDB。未加载驱动程序
- regex - 正则表达式匹配除 0、1(11、12 等)以外的所有数字
- html - Angular Material Mat-菜单
- python - 使用无头时滚动的差异
- perl - perl拼接数组缺少条目
- elasticsearch - 无法通过带有 http://localhost:9200、9201、9203 的浏览器访问弹性搜索集群中 3 个节点中的 2 个(仅第一个)。这是正常的吗?为什么?
- python - 在 Jupyter Notebook 中键入 Markdown 和 LaTeX:2 错误
- python - 与单次读取并行将信息复制到少数数据库
- oracle-sqldeveloper - SQL Developer 代码完成仅当前架构