css - 如何在保持可维护性的同时避免移动/桌面 CSS 之间的重复？

Question

假设我的 CSS 看起来有点像这样（这是伪代码 CSS，有点）：

@media-query for mobile {
    div {
        width: X;
        height: Y;
        display: flex-box;
    }
}


@media-query for desktop {
    div {
        width: W;
        height: Z;
        display: flex-box;
    }
}

请注意，宽度和高度是不同的，但两者的显示是相同的。当然，如果它这么简单，我可以从媒体查询中重新定位显示属性并完成。

但是对于一个复杂页面上的许多选择器，我有数百行 CSS，在我看来，使用这种策略会导致它有点难以维护。我总是需要在两个不同的地方来回查看，以检查移动设备或桌面设备上给定元素的样式。

有没有更好的解决方案，或者这是一个“收拾它，公主”的案例？

标签： css

Answer 1

正如您的问题下面的评论之一，您可以通过首先构建您的项目移动来做到这一点。这意味着您将开始没有@media并且只是构建一个小的普通页面。比以后，您可以包括一个不同@media的桌面。像这样的东西：

.searching {
  display: none;
  position: absolute;
  right: 0;
  top: 65px;
  background-color: $dark-grey;
  padding: 12px 9px 12px 30px;
  z-index: 6;
  border: 1px solid $red;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=90)';
    filter: opacity(0.9);
    -khtml-opacity: 0.9;
    -moz-opacity: 0.9;
    opacity: 0.9;

  input {
    padding: 7px 12px 6px 24px;
  }

  .s-magnify {
    font-size: 18px;
    padding: 7px 12px 8px 10px;

    &:before {
      transform: scaleX(-1) translateY(18%);
    }
  }

  button {
    margin-left: -5px;
  }

  @include breakpoint (tablet) {
    top: 100px;
  }

  @include breakpoint (phone) {
    top: 90px;
    padding: 12px 9px 12px 16px;

    input {
      padding: 5px 6px 6px 8px;
    }

    .s-magnify {
      padding: 5px 12px 8px 10px;
    }
  }
}