CSS 根据屏幕分辨率应用样式

Question

我有一个 CSS 类:

.container {
    padding-left: 150px;
}

我想要的是，当屏幕分辨率为平板电脑或移动设备时，我希望 padding-left 仅类似于 10px。

我该怎么做？

Answer 1

使用 CSS 媒体查询。仅供引用示例，我已将屏幕尺寸作为引用 Bootstrap .

/* For Mobile Phones */
@media screen and (max-width: 767px) {
  .container {
    padding-left: 10px;
  }
}

/* For Tablets (Portrait) */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .container {
    padding-left: 10px;
  }
}

希望这对您有所帮助!