Question

假设我创建了一个类似于表的组件，我希望在不同的页面中重用它。表格中的内容和列数因页面而异，但外观应该相同。

.my-table {
    background-color: ... etc
    color: ... etc
}

当使这个组件响应时 - 每个页面是否应该有自己的一组媒体查询来改变这个组件的外观，或者组件本身是否应该定义查询？

IE中。在移动设备上查看时，我可能想隐藏此表的第3列和第5列，但在另一个页面上可能只有3列，我不希望第3列隐藏在该页面上。在这种情况下使用什么更好的做法？响应逻辑应该与组件样式分离吗？

另一个例子 - 我读过的大多数CSS指南建议做这样的事情：

.layout-columns-2 {
     float: left;
     width: 50%;
}

.layout-columns-4 {
     float: left;
     width: 25%;
}

无论何时需要列并排浮动，您都可以在布局上重复使用。但是，当您尝试应用响应式规则时，再次遇到类似的问题。

例如，在一个页面上，您想要在宽度为600px时打破特定div的浮动，以便垂直堆叠列。但是在页面的另一部分，你希望浮点数突破800px。最好的办法是什么？

Answer 1

我建议使用一些表mixin创建一个Sass partial，可以根据需要应用它们。这将允许您将表“模块”与实际表格分离。解耦通常是一件好事，因为它可以让您更轻松，更一致地添加和更改样式。

由于您希望断点在不同的表格之间不同，我会默认将表格样式保留为“移动优先”，并根据需要逐个自定义。

<强> _tables.scss：

table {
  // Global, mobile-first styles go here
}

@mixin columns-2() {
  td {
    float: left;
    width: 50%;
  }
}

@mixin columns-4() {
  td {
    float: left;
    width: 25%;
  }
}

// Function to return a max breakpoint (1px less)
@function max-break($size) {
  @return $size - .0625em;
}

使用你的部分，你可以适用于任何特定的表格...

<强>特殊page.scss：

@import 'tables';

.my-table {
  // Hide columns 2/4 below 800px
  @media (max-width: max-break(50em)) {
    td:nth-child(2),
    td:nth-child(4) {
      display: none;
    }
  }

  // Use 2 columns at 600px
  @media (min-width: 37.5em) {
    @include columns-2();
  }

  // Use 4 columns at 600px    
  @media (min-width: 50em) {
    @include columns-4();
  }
}

css组件和响应耦合 - 最佳实践？

1 个答案: