在响应css中使用像素宽度

Question

我发现站点响应，即使宽度指定为像素。

https://github.com/ParsePlatform/parse-dashboard/blob/master/src/components/AppBadge/AppBadge.scss#L22

在为web和移动用户编写响应性CSS时，使用像素宽度代替百分比是一种糟糕的做法吗？

因此，我在这里寻找一些规则，什么时候我们可以使用像素作为宽度和百分比。

Answer 1

正确的响应性设计通常需要使用像素(或其他测量单位，如em、rem、vw等)。以及百分比和媒体查询。大多数响应性强的设计框架，比如Twitter的Bootstrap，仍然使用像素来进行媒体查询：

/* Example of a Bootstrap Media Query */
@media (min-width: 1200px) {
  .visible-lg-block {
    display: block !important;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

并处理它们的一些响应性实用工具类依赖于百分比和使用边距/填充：

/* Example of Bootstrap's Responsive Column Classes */
.col-xs-1, ... .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.col-xs-12 {
  width: 100%;
}
.col-xs-11 {
  width: 91.66666667%;
}
.col-xs-10 {
  width: 83.33333333%;
}

因此，没有硬性/快速的规则可供使用。某些方案可能需要百分比，而另一些方案可能需要定义确切的大小。如果您想要正确地进行响应性设计，您将需要使用最好的工具，可能是百分比，也可能是像素。

Answer 2

如果需要，可以使用rem而不是使用基本字体大小作为参考点的px，这有助于缩放。就我个人而言，我在可能的情况下使用百分比，但有时设计需要显式设置宽度，因为流体不适合/完全不适合您已经提交的设计。