Question

我对高级CSS很陌生。我有一个自定义标题部分，我只想集中在移动设备上。我添加了一个类名和以下代码，但是什么也没发生。

.mobile-text {
  text-align: right;
}

@media (max-device-width: 600px) {
  .mobile-text {
    text-align: center;
  }
}

This是该网站的主页，其段落如下：

挑战规范并提升期望的房地产。这是一个黑白世界中的多彩思维。

Answer 1

max-device-width将定位到整个设备区域（即设备屏幕）的宽度。而是使用max-width，它以整个浏览器区域的宽度为目标。

@media (max-width: 600px) {
  .mobile-text {
    text-align: center;
  }
}

注意：device-width个查询是deprecated。

Answer 2

如果您在桌面视图中签入，则您的媒体查询在桌面上不起作用。

您的class声明也是错误的，请从.中删除mobile-text。：）

max-width is the width of the target display area, e.g. the browser

max-device-width is the width of the device's entire rendering area, i.e. the actual device screen

请全部使用@media和（最大宽度：600px）{}

有关更多详细信息，请访问here

希望它会对您有所帮助。：）

Answer 3

您在网站上的课程是.mobile-text，应该是mobile-text-.仅在选择器中用来表示以下文本是课程名称

此外，您在元素（style=font-size: 35px... etc上的内联样式正在覆盖您的更改-您可以使用!important懒惰地处理此问题

.mobile-text {
  text-align: right !important;
}

@media (max-device-width: 600px) {
  .mobile-text {
    text-align: center !important;
  }
}

Answer 4

当我检查页面的html时，我可以看到此class=""的{{1}}：

<h4>

在您的class="vc_custom_heading .mobile-text wpb_animate_when_almost_visible wpb_right-to-left right-to-left vc_custom_1580217248411 wpb_start_animation animated"中，您想使用css类对其进行操作。这里的问题是您使用.mobile-text在html中定义了此类。这实际上是错误的，您只需要像这样.mobile-text来定义它：

mobile-text

class="vc_custom_heading mobile-text wpb_animate_when_almost_visible wpb_right-to-left right-to-left vc_custom_1580217248411 wpb_start_animation animated"实际上是类的css选择器，例如.是id的选择器。

仅在移动设备上居中显示文字

4 个答案: