更高分辨率的媒体查询答案

【问题标题】：Media queries for higher resolutions更高分辨率的媒体查询
【发布时间】：2016-07-11 23:33:01
【问题描述】：

我坚持这个决议。我正在为以下分辨率编写 CSS。

一个。 800x600 湾。 1024x768 C。 1280x800 和 1280x1024 d。 1366x768 e. 1920x1080 F。 2560x1440

我的笔记本电脑分辨率是1366*768，我已经完成了CSS查询，但现在出现的问题是我如何为1920*1080和2560*1440编写CSS

我正在通过更改 chrome 的检查元素来测试分辨率。

我尝试为1920*1080 编写代码，但只有在我删除1366*768 的代码时它才有效，这意味着一次只有一个代码在运行。

这是我的 CSS 代码：

@media only screen and (max-device-width: 800px) and (max-device-height: 600px){
  .tab-menu
  {
      padding: 0px;
      width: 16.2%;
      margin-right: 1px !important;
  }
    .tab-menu a
    {
        font-size: 13px !important;
    }
    .main
    {
        width: 10%;
    }
    .other
    {
        width: 10%;
    }
    .sku
    {
        width: 10%;
    }
    .adjust-height
    {
        width: 100px;
    }
    .table
    {
        font-size: 13px;
    }
    .w-line
    {
        width : 9.2%;
    }
    .w-store
    {
        width: 9%;
    }
    .w-item{
        width: 13.3%;
    }
    .w-item-name{
        width:22.4%;
    }
    .w-qty
    {
        width: 10%;
    }
    .w-uom
    {
        width: 5%;
    }
    .w-price
    {
        width: 10%;
    }
    .w-total
    {
        width: 1.4%;
    }
    .w-blank
    {
        width: 2%;
    }



}





@media all and (-ms-high-contrast:none) and (max-device-width: 800px) and (max-device-height: 600px) {
    *::-ms-backdrop,.w-line {
        width: 9%;
    }
    *::-ms-backdrop,.w-qty {
        width: 9%;
    }
    *::-ms-backdrop,.w-price {
        width: 10%;
    }
}




@media only screen and (max-device-width: 1280px) and (max-device-height: 720px){
    .bottom-grid
    {
        height: 130px;
    }
    .adjust-height
    {
        width: 130px;
    }
    @-moz-document url-prefix() {
        .bottom-grid
        {
            height: 120px;
        }
    }
    *::-ms-backdrop,.bottom-grid {
        height: 121px;
    }
}


@media only screen and (max-device-width: 1280px) and (max-device-height: 768px){
    .adjust-height
    {
        width: 130px;
    }
}



@media only screen and (max-device-width: 1920px) and  (max-device-height: 1080px){
    body
    {
        overflow-x: hidden;
    }
    .adjust-height
    {
        width: 200px;
    }
    .bottom-grid
    {
        height: 490px;
    }
    .tab-menu
    {
        width: 13.9%;
    }
    .foot-close
    {
        padding-right: 170px;
    }
    .tab-menu-left
    {
        padding-left:70px;
        padding-right:65px;
    }
    .tab-menu-right
    {
        padding-left: 0px;
        padding-right: 170px;
    }
    @-moz-document url-prefix() {
        .bottom-grid
        {
            height: 480px;
        }
    }
    *::-ms-backdrop,.bottom-grid {
        height: 480px;
    }
}


@media only screen and (max-device-width: 1366px) and (max-device-height: 768px) {
    .adjust-height
    {
        width:137px;
        transition: all 0.5s;
    }
    .tab-menu
    {
        width: 13.8%;
        text-align: center;
        margin-right:5px;
    }
    .tab-menu-left
    {
        padding-left:5px;
    }
    .tab-menu-right
    {
        padding-right:67px;
    }
    .bottom-grid
    {
        height:179px;
        width:100%;
        background-color: white;
        overflow-y: scroll;
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 0px;
        padding-right: 0px !important;
    }
    .w-img
    {
        width: 5%;
    }
    .w-line
    {
        width: 7.2%;
    }
    .w-store
    {
        width: 10.4%;
    }
    .w-item
    {
        width: 14.3%;
    }
    .w-item-name
    {
        width: 24.4%;
    }
    .w-qty
    {
        width: 10.2%;
    }
    .w-uom
    {
        width: 6%;
    }
    .w-price
    {
        width: 7.8%;
    }
    .w-total
    {
        width:7.6%;
    }

    @-moz-document url-prefix() {
        .bottom-grid {
            height:167px;
        }
        .w-qty
        {
            width: 10.9%;
        }
    }

    @media all and (-ms-high-contrast:none)
    {

        *::-ms-backdrop,
        .bottom-grid {
            height: 165px;
            margin-bottom: 0px;
        } /* IE11 */
        *::-ms-backdrop,.main-footer
        {
        }*::-ms-backdrop,.blue-band
         {
             font-size: 14px;
         }
        *::-ms-backdrop,.form-control
        {
            padding: 3px 6px;
        }
        *::-ms-backdrop,.select2-selection__arrow b
        {
            top:25% !important;
        }
    }
}

提前谢谢...

【问题讨论】：

你的意思是你需要min-width？
不知道有没有人可以给我一段代码那会很有帮助
首先你需要明确媒体查询，什么是最大宽度和最小宽度以及在哪里使用。
我没有检查过这个，但也许你可以通过编辑你的 CSS 来模拟更高的分辨率以使用非标准的 DPPX 分辨率，例如使用双倍标准的 Retina 显示器（抱歉我的参考不是最新的所以我的确切措辞可能有点过时）。 reference.

标签： html css media-queries resolution

【解决方案1】：

当使用 2 个或更多媒体查询时，它们在 CSS 中的顺序很重要。

这是一个“先做大”的解决方案，body 开始变灰并在屏幕变小时改变

Fiddle demo

body {
  background: gray;
}

@media only screen and (max-width: 1000px) {
  body {
    background: red;
  }
}
@media only screen and (max-width: 800px) {
  body {
    background: blue;
  }
}
@media only screen and (max-width: 600px) {
  body {
    background: green;
  }
}

这是一个“先变小”的解决方案，body 开始变灰并在屏幕变大时发生变化

注意，这里是与上面max-width规则相比的查询切换顺序

Fiddle demo

body {
  background: gray;
}

@media only screen and (min-width: 600px) {
  body {
    background: green;
  }
}
@media only screen and (min-width: 800px) {
  body {
    background: blue;
  }
}
@media only screen and (min-width: 1000px) {
  body {
    background: red;
  }
}

【讨论】：

【解决方案2】：

要定位一个重新定位（例如： 1024x768 ），您可以使用以下代码。

@media(min-width:768px) and (max-width:1024px) {
   /* enter your css for the super design !!! */
 }

希望对你有帮助！

【讨论】：