不同设备上的页面布局 - 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 的比例。否则，你需要计算出你想要定位的设备的宽高比，并从那里计算出阈值级别。