属性显示的媒体查询问题：无；答案

【问题标题】：Media Query issue with property display:none;属性显示的媒体查询问题：无；
【发布时间】：2020-07-30 17:42:57
【问题描述】：

我遇到了一个小的 HTML/CSS 问题。这是媒体查询的问题。我一直在努力寻找解决方案，但找不到。我想知道是否有人可以帮助我。我不希望我的标题显示在 web 视图中，但我希望它显示在其响应式 IE 移动视图中，因此我使用了媒体查询。

因此，我在 CSS 中使用了display:none，因此它不会显示在 web 视图中，并使用了媒体查询，以便它可以在移动视图中可见，但正如您所见，它在移动视图中不可见。我完成了我的整个 webview，当我重新设计我的移动视图时，我遇到了这个问题。我不得不重新开始。你能告诉我该怎么做吗？

代码如下：

* {
  margin: 0;
  padding: 0;
}

body {
  background: none;
}

.title {
  color: green;
  padding: 15px;
  font-size: 3vh;
  display: none;
}

@media screen and (max-width:480px) {
  .title {
    color: green;
    padding: 15px;
    font-size: 3vh;
  }
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

  <head>
    <meta charset="utf-8">
    <title>Tile's here</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type='text/css' href="css/tech.css">
  </head>

  <body>
    <div class="title">
      <h1>title<sub>here</sub></h1>
    </div>
  </body>

</html>

【问题讨论】：

这个问题和javascript和php有什么关系？请使用正确的标签
将 disply none 添加到您的标题类和媒体查询显示块中，在大屏幕上它不可见，而在小屏幕上它会。并且您不必在媒体查询中添加相同的样式，除非您想更改它
请说明你想要完成什么？
你的媒体查询没有设置显示值
这能回答你的问题吗？ Issue with creating a responsive program with media queries

标签： html css media-queries

【解决方案1】：

媒体块中选择器.title 的规则只会覆盖您在此处明确写入的参数（颜色、填充、字体大小）。标题未显示，因为显示仍为none。如果您将条目 display: initial; 添加到媒体查询内的 .title 块中，则会显示标题。

附带说明，设置字体大小3vh 不是最佳选择，因为它会在用户使用时更改字体，例如在移动设备上打开键盘或使用分屏模式（如果可用）。

【讨论】：

【解决方案2】：

一旦您设置了 display:none，它将始终设置为该值，直到您更改它。您需要在媒体查询中添加display:block;

@media screen and (max-width:480px){
  .title{
    color: green;
    padding: 15px;
    font-size:3vh;
    display:block; /*new*/
  }
}

因此它将在移动视图上可见。如果您想在移动设备上隐藏它并在更大的屏幕上显示它，只需在媒体查询中设置 display:none

【讨论】：

【解决方案3】：

这对你有用。因为你不希望它显示在网络上，只需将属性 display 添加到 none 就可以了。移动视图需要设置媒体查询和属性。

* {
  margin: 0;
  padding: 0;
}

body {
  background: none;
}

.title {
  display: none;
}

@media screen and (max-width:480px) {
  .title {
    color: green;
    padding: 15px;
    font-size:3vh;
  }
}

【讨论】：