高解像度用のメディアクエリ

Question

解像度に悩まされています。 私は以下の決議のためにCSSを書いています。

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

そして、私のノートパソコンの解像度が1366*768で、私はそこまでCSSクエリを行っているが、今生じる問題は、私は1920*1080と2560*1440

のためのCSSを書くどのように私は検査の要素を変更することにより、解像度をテストしていていますクロムの

1920*1080のコードを作成しようとしましたが、1366*768のコードを削除すると機能します。これは、コードが1つだけ実行されていることを意味します。ここで

は、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で重要です。ここ

は、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がグレーで始まり、画面が大きくなると変化します

ここでは210

注、クエリの順序は、あなたが `分-width`を必要とするわけ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; 
 
    } 
 
}

Answer 2

1 reslotion（例：1024×768）を標的とするために、あなたは、この次のコードを使用することができます。

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

希望、それはあなたを助けます！