CSS - 設計移動設備時只使用一個@media查詢是否安全？

我正在做一個應該在移動設備上工作的網站。我研究這個話題，每個網站建議我使用每個設備不同的媒體查詢我打算在網站上下工夫，例如：CSS - 設計移動設備時只使用一個@media查詢是否安全？

/* ----------- iPhone 4 and 4S ----------- */ 

/* Portrait */ 
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: portrait) { 
} 

/* Landscape */ 
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: landscape) { 

} 

/* ----------- iPhone 5 and 5S ----------- */ 

/* Portrait */ 
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 568px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: portrait) { 
} 

/* Landscape */ 
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 568px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: landscape) {  
} 

/* etc... */

不過，我覺得這將是非常非常簡單，只需使用一個媒體查詢景觀和另一個肖像定位，但我還沒有找到任何人推薦。

我想你可能想要設計一些更具體的平板電腦的東西。但是隻講移動電話，如果你想要一些特定的東西，我只能有理由對每個設備進行不同的媒體查詢。

是否有任何理由呢？我應該爲每個設備添加一個媒體查詢嗎？還是隻有兩個媒體查詢才能「安全」？

來源

2017-04-12 JoseSoares

這實際上取決於您的設計，如果您可以在特定尺寸範圍內容納所有設計元素，則您並不需要針對每個設備進行多種不同的媒體查詢。 – cosmoonot

簡答：是的 –

它看起來很安全，但沒有人建議在任何地方都可以找到它。比對不起更安全！僅根據計劃使用@media查詢縱向查看，另一個查詢橫向和智能定位和尺寸查看響應性。格拉西亞斯 – JoseSoares

只需一個或兩個媒體查詢，就可以完全實現它。我一直都在做平板電腦，然後在適用於所有設備的完全響應網站中進行移動。當開發人員想要爲此大小和大小設置網站的設置版本時，這些充實的媒體查詢類型是針對特定大小的。

@media screen and (max-width: 1024px) { 
    /* Landscape style changes */ 
} 

@media screen and (max-width: 768px) { 
    /* Portrait to mobile style changes */ 
} 

@media screen and (max-width: 450px) { 
    /* Maybe one more because that header text doesn't fit anymore on smaller screen */ 
}

這將是一樣好，其餘的代碼，但如果你有乾淨的CSS這應該不成問題。

來源

2017-04-12 14:37:03 StefanBob

這絕對沒問題。不要忘了將響應元標記添加到每個頁面：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

然後在調整預覽窗口寬度和高度時使用媒體查詢。這將使網站與桌面版本相同。

來源

2017-04-12 14:42:18

CSS - 設計移動設備時只使用一個@media查詢是否安全？

回答

相關問題