Question

即使宽度以像素为单位，我发现网站也会响应。

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

在编写响应时，使用像素宽度代替百分比是不好的做法用于网络和移动设备的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，如果您愿意，可以使用基本字体大小作为参考点，这有助于缩放。就个人而言，我尽可能使用百分比，但有时候一个设计需要明确设置宽度，因为流体不适合/完全适用于你已经设计的设计。

在响应式css中使用像素宽度

2 个答案: