为什么媒体查询在移动设备上不起作用？
[英]Why is the media query not working on mobile?
问题描述
我在我的 html 页面中使用了媒体查询。 适用于小屏幕和大于 500 像素的屏幕。 这是一个示例。
.col-1 { width: 58%;} .col-2 {width: 25%;} .col-3 {width: 16%;} .col-4 {width: 100%;} @media only screen and (min-width: 480px) { .col-sm-1 {width: 100%;} } <body> <div class="header col-4 col-sm-1"></div> <div class="aside col-2 col-sm-1"></div> <div class="main col-1 col-sm-1"></div> <div class="right-col col-3 col-sm-1"></div> <div class="footer col-4 col-sm-1">
当我将浏览器窗口的大小调整到 480px 以下时，所有 div 的宽度都会更改为 100%。 但是我将该文件传输到我的手机，并且在移动浏览器中打开该文件时，宽度不会更改为 100%。 但是缩放级别很好（可读性很好）
2 个解决方案
解决方案1
1 2017-10-02 14:21:24
media only screen and (min-width: 480px) {
需要是
@media only screen and (min-width: 480px) {
解决方案2
0 已采纳 2017-10-02 14:50:28
尝试：
@media only screen and (max-width: 480px) {
.col-sm-1 {width: 100%;}
}
当屏幕为 480 像素或以下时，这只会应用 100% 的宽度。
如果仍然没有快乐，请尝试：
@media only screen and (max-width: 480px) {
.col-1,
.col-2,
.col-3 {
width: 100%;
}
}
移动设备上的媒体查询断点不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.