「@media唯一屏幕和」不會根據輸入被刪除

我正在實施基於響應式設計的HTML應用程序。我正在使用「@media only screen」作爲響應式樣式。「@media唯一屏幕和」不會根據輸入被刪除

我使用下面CSS代碼的移動方向（橫向/縱向）：

@media only screen and (max-device-width: 465px), screen and (max-width: 465px) 
.align { 
    width: 33.33%; 
} 

@media only screen and (max-device-width: 736px), screen and (max-width: 736px) 
.align { 
    width: 25%; 
}

第一個是用於垂直和第二個是用於景觀樣式。
問題是，當我將瀏覽器方向窗體縱向更改爲橫向時，縱向樣式不會在CSS中移除兩種樣式均處於啓用狀態，但如果我縮小瀏覽器大小，則將移除垂直樣式，並且橫向樣式負責。
那麼如何在不改變瀏覽器窗口大小的情況下從我的頁面中刪除不需要的樣式。

來源

2016-11-25 Mahesh_045

不要使用'device-width' *，除非你完全知道**爲什麼**你正在使用它*。只能使用'width'。爲了定位，只用那個！ '（orientation：landscape）''（orientation：portrait）'。 – connexo

可以

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { /* STYLES GO HERE */ }

來源

2016-11-25 10:34:26 Indhu

同樣，對於常見的媒體查詢，您不希望使用'device-width'，而是'width'。 – connexo

我們也可以定義沒有方向我認爲CSS，通過定義介質寬度提供方位一些附加條件是足夠的造型

@media (max-width: 465px){ 

//Do your styling here 

} 

@media (max-width: 1024px){ 

//Do your styling here 

}

這將幫助ü風格的CSS不僅適用於移動肖像和景觀，而且適用於屏幕尺寸的設備。

來源

2016-11-25 10:43:55

「@media唯一屏幕和」不會根據輸入被刪除

回答

相關問題