Question

我被这个决议所困扰。我正在为以下决议编写CSS。

a.      800x600
b.      1024x768
c.      1280x800 and 1280x1024
d.      1366x768
e.      1920x1080
f.      2560x1440

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

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

我尝试为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;
        }
    }
}

提前致谢...

Answer 1

使用2个或更多媒体查询时，CSS中的顺序非常重要。

这是一个更大的第一个＆＃34;解决方案，其中body开始变灰并在屏幕变小时变化

Fiddle demo

＆＃13;

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;
  }
}

＆＃13;

这是一个较小的第一个＆＃34;解决方案，body开始变灰并在屏幕变大时变化

注意，以下是与上述max-width规则相比较的查询切换顺序

Fiddle demo

＆＃13;

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;
  }
}

＆＃13;

Answer 2

以一个reslotion（例如：1024x768）为目标，您可以使用以下代码。

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

希望，它对你有帮助！

媒体查询更高分辨率

2 个答案: