不同的布局与一种响应式布局来处理不同的设备尺寸和方向答案

【问题标题】：Distinct layouts vs one responsive layout to handle different device sizes and orientations不同的布局与一种响应式布局来处理不同的设备尺寸和方向
【发布时间】：2018-04-15 01:40:50
【问题描述】：

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

对于前一个选项，我看到了重复的缺点，因为同一部分的布局很可能共享一致数量的 ui 元素；对于后者，我认为在同一个 html/css 中处理设备大小/方向的所有不同组合可能非常复杂，尤其是在布局彼此之间存在显着差异的情况下。

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

【问题讨论】：

标签： html css layout responsive-design single-page-application

【解决方案1】：

我会选择第二个选项，管理 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) {

}

【讨论】：

谢谢！是的，我正在使用带有 gulp 的 sass 预处理。如果设备之间的布局彼此之间存在显着差异，那么为每个设备提供特定的响应式布局是否有意义（使用媒体查询处理方向）？这里的问题不是 css，而是每种设备的 html 中的不同结构。或者我必须不惜一切代价争取一个单一的 html 布局？
除非每个设备的实际内容发生变化，否则 HTML 将保持不变。媒体查询用于根据设备显示、隐藏和操作 HTML 位，例如移动导航。每个视图中的 HTML 都是相同的。

【解决方案2】：

您应该使用媒体查询。它们要好得多，因为您不必重写所有代码，您只需更改实际需要更改的内容，其余部分保持不变。这使您可以重用相同的 HTML，而不是为移动设备、台式机、平板电脑等使用不同的 HTML...

这比为每个屏幕尺寸制作单独的页面要少得多...

【讨论】：