Question

我对桌面/平板电脑/智能手机和纵向/横向的任意组合都有特定的布局。在Single Page Application的上下文中，最好将布局分离为不同的资源，并使用一些javascript / css逻辑加载它们以检测设备类型和方向，或者使用单个html / css资源并使用单个html / css资源来区分布局一些复杂的媒体查询/装饰逻辑？

对于前一个选项，我看到了重复的缺点，因为同一部分的布局可能共享一致数量的ui元素;对于后者，我发现在同一个html / css中处理设备大小/方向的所有不同组合可能非常复杂，特别是如果布局之间存在显着差异。

最好的方法是什么？为什么？

Answer 1

您应该使用媒体查询。它们要好得多，因为你不必重写所有的代码，你只需要改变实际需要改变的东西，剩下的就是它。这使您可以重复使用相同的HTML，而不是为移动设备，桌面设备，平板电脑等使用不同的HTML ...

与为每个屏幕尺寸制作单独的页面相比，它的工作要少得多......

Answer 2

我会选择第二个选项，管理CSS会更容易，而不是复制所有内容，在这种情况下，DRY是最好的工作方式。

如果您使用的是Sass或Less之类的预处理器，那么在样式表底部的某些条件下添加它会很容易，为每个方向提供更多样式。

以下是关于DRY原理的更多信息： http://vanseodesign.com/css/dry-principles/

一些关键方面是：

将可重复使用的css属性组合在一起
逻辑上命名这些组
将您的选择器添加到各种css组

通过媒体查询保持整洁有序

通过页面顶部的主要样式，可以根据需要使用移动，移动人像和移动环境等媒体查询添加任何调整：

/* Portrait and Landscape */
@media only screen 
  and (max-device-width: 480px) {

}

/* Portrait */
@media only screen 
  and (max-device-width: 480px)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (max-device-width: 480px)
  and (orientation: landscape) {

}

不同的布局与一个响应式布局，以处理不同的设备大小和方向

2 个答案: