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

Question

<分区>

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%;
}

因此没有关于使用的硬性/快速规则。某些场景可能需要百分比，其他场景可能需要定义确切的大小。如果您想正确地进行响应式设计，则需要使用可用的最佳工具，可能是百分比，也可能是像素。