Question

我在html页面中使用了媒体查询。适用于小屏幕和大于500px。这是一个样本。

.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％。但是缩放级别很好（可读性很好）

Answer 1

media only screen and (min-width: 480px) {

需要

@media only screen and (min-width: 480px) {

Answer 2

尝试：

@media only screen and (max-width: 480px) {
 .col-sm-1 {width: 100%;}
 }

当屏幕为480px或更低时，此宽度仅为100％。

如果仍然没有喜悦，那么试试：

@media only screen and (max-width: 480px) {
  .col-1,
  .col-2,
  .col-3 {
  width: 100%;
  }
}

为什么媒体查询无法在移动设备上运行？

2 个答案: