meteor 不同设备上的页面布局-CSS

示例

如果您的应用程序要在不同的设备上运行，则需要根据设备的大小渲染到不同的ViewPort。您可以通过两种方式处理此问题：使用JavaScript规则或CSS媒体样式。如果您一直在使用MVC或MVVM库（例如Angular或Ember（就此而言是Blaze））并且仅针对单个设备或硬件平台，则可能需要重新考虑您的MVC模型，因为不同的硬件ViewPort是介绍给您的应用程序。

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

// 景观取向
@media only screen and (min-width: 768px) {
}

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

您需要弄清楚是要以768px（纵向模式）还是以1024像素（横向）破坏样式。假设您的目标移动设备是iPad，它使用3：4的比率。否则，您将需要确定要定位的设备的纵横比，并从中确定阈值水平。