Question

我有一个CSS类，如：

.container {
    padding-left: 150px;
}

我想要的是当屏幕分辨率为平板电脑或手机时，我希望padding-left仅为10px。

我该怎么做？

Answer 1

您可以使用CSS @media query来执行此操作。您提供breakpoints作为参数，例如here。

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

[..etc..]

Answer 2

使用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;
  }
}

希望这有帮助！

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

2 个答案: