html - 响应式设计 - 支持最大分辨率媒体查询的 css

Question

我最近开始学习手机等的响应式设计，我正在使用 troy.labs.daum.net 进行测试，它开始在我的前两个媒体查询上运行良好，尽管当我从分辨率列表中选择时它现在只显示400px 宽度查询

这是我的CSS

@media only screen and max-width 320px {
  #searcher
  {
    width:190px;
    height:30px;
    float:left;
  }

  #searcherin
  {
    width:185px;
    height:16px;
    margin-top:6px;
    border:1px solid #ccc;
    padding-left:4px;
    text-transform:capitalize;
  }
}

@media only screen and max-width 360px {
  #searcher
  {
    width:230px;
    height:30px;
    float:left;
  }

  #searcherin
  {
    width:225px;
    height:16px;
    margin-top:6px;
    border:1px solid #ccc;
    padding-left:4px;
    text-transform:capitalize;
  }
}

@media only screen and max-width 400px {
  #searcher
  {
    width:268px;
    height:30px;
    float:left;
  }

  #searcherin
  {
    width:264px;
    height:16px;
    margin-top:6px;
    border:1px solid #ccc;
    padding-left:4px;
    text-transform:capitalize;
  }
}

我这样做有问题吗？链接是http://2click4.com/new/mobile/home.php

Answer 1

颠倒顺序，从最大的开始，到最后的是最小的。对于较小的尺寸，您只需定义当前尺寸和之前尺寸之间变化的规则，因为 360 将携带 400 及以上尺寸的规则。

@media only screen and (max-width: 400px) { ... }

@media only screen and (max-width: 360px) { ... }

@media only screen and (max-width: 320px) { ... }

http://jsfiddle.net/88wgM/

调整查看区域的大小并查看更改，如果您像在代码中那样反转它，它不起作用

确保你有

(max-width: 400px)

max-width 之后的 () 和 :