浏览器较大时如何反转文本对齐的效果

Question

在非常小的设备上，我想在屏幕上对齐标题文本。 所以我添加了text-align和vertical-align。

现在，当浏览器较大时，我想删除这2个CSS属性。

我该怎么做？

.main-title {
  text-align: center;
  vertical-align: middle;

  @include media-breakpoint-up(sm) {
    text-align: inherit;
    vertical-align: inherit;
  }
}

Answer 1

您只能对小型设备使用媒体查询。 例如：

@media screen and (max-width: 600px) {
  .main-title{
    text-align: inherit;
    vertical-align: inherit; 
  }
}