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)

最大宽度

后的()和:

Answer 2

当您开始开发响应式设计时，非常重要的是指定方向！

/*Tablet devices*/
@media only screen and (min-width: 0px) and (max-width: 320px) and (orientation: landscape) {
...
}

/*Tablet devices*/
    @media only screen and (min-width: 321px) and (max-width: 360px) and (orientation: landscape) {
    ...
}

/*Tablet devices*/
    @media only screen and (min-width: 361px) and (max-width: 400px) and (orientation: landscape) {
    ...
}

首先，您需要指定最低宽度设备。然后你转到最大的那些！

Answer 3

这是一个很好的样板文件，可用于在样式表中启动媒体查询。

// Small screens
@media only screen { } /* Define mobile styles */

@media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */

// Medium screens
@media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */

@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

// Large screens
@media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */

// XLarge screens
@media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

// XXLarge screens
@media only screen and (min-width: 120.063em) { } /* min-width 1921px, xlarge screens */

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

3 个答案: