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