不同裝置上的頁面佈局 - CSS

如果你的應用程式將在不同的裝置上執行，則需要根據裝置大小呈現到不同的 ViewPorts。你可以通過兩種方式處理此問題：使用 javascript 規則或 CSS 媒體樣式。如果你一直在使用 MVC 或 MVVM 庫，例如 Angular 或 Ember（或 Blaze，就此而言）並且只針對單個裝置或硬體平臺，你可能需要重新考慮你的 MVC 模型，因為不同的硬體 ViewPorts 是介紹給你的應用程式。

// desktop 
@media only screen and (min-width: 960px) {
}

// landscape orientation
@media only screen and (min-width: 768px) {
}

// portrait orientation
@media only screen and (min-width: 480px) {
}

你需要確定是否要在 768px（縱向模式）或 1024 畫素（橫向）處打破樣式。這是假設你的目標移動裝置是 iPad，它使用 3：4 的比例。否則，你需要計算出你想要定位的裝置的寬高比，並從那裡計算出閾值級別。