使用媒体查询创建响应程序的问题

Question

我正在尝试创建一个简单的响应程序，它将根据屏幕大小更改文本。

我创建了 2 个应该显示的 div 标签，一个用于 PC 用户，另一个用于移动设备，对于后者我将其设置为 visibility: hidden; 所以它不会'除非你的屏幕足够小，否则我不会显示，然后我创建了媒体查询并复制并粘贴了 div 我想在媒体查询中用于名为 Mobile 的移动用户。

我只删除了 visibility: hidden; 标签所以它显示了，但是它不起作用然后屏幕变小了文本没有改变，有人可以帮忙吗？

Media Query Program

body {}

@media (max-width: 320px) {
  .Mobile {
    font-family: Roboto;
    font-size: 100px;
    text-shadow: 2px 1px 2px gray;
    position: absolute;
    margin: auto;
    top: 50%;
    left: 50%;
    padding: 15px;
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
}

.PC {
  font-family: Roboto;
  font-size: 100px;
  text-shadow: 2px 1px 2px gray;
  position: absolute;
  margin: auto;
  top: 50%;
  left: 50%;
  padding: 15px;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.Mobile {
  font-family: Roboto;
  font-size: 100px;
  text-shadow: 2px 1px 2px gray;
  position: absolute;
  margin: auto;
  top: 50%;
  left: 50%;
  padding: 15px;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  visibility: hidden;
}

<!DOCTYPE html>
<html>

<head>
  <title>Media Query</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

</head>

<body>
  <p class="PC"><strong>PC</strong></p>
  <p class="Mobile"><strong>Mobile</strong></p>
</body>

</html>

Answer 1

几个问题：

您应该使用meta viewport标签。
在您的媒体查询中，您从未将元素设置为显示或更改可见性。 CSS 读取所有样式，因此您需要实际更改属性。

在下面的示例中，您看到我在您的两个元素上设置了 display 属性 - media_query

的内部和外部

.PC {
  font-family: Roboto;
  font-size: 100px;
  text-shadow: 2px 1px 2px gray;
  position: absolute;
  margin: auto;
  top: 50%;
  left: 50%;
  padding: 15px;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: block;
}

.Mobile {
  font-family: Roboto;
  font-size: 100px;
  text-shadow: 2px 1px 2px gray;
  position: absolute;
  margin: auto;
  top: 50%;
  left: 50%;
  padding: 15px;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: none;
}

@media (max-width: 620px) {
  .Mobile {
    display: block;
  }
  .PC {
    display: none;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Media Query</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">


</head>

<body>
  <p class="PC"><strong>PC</strong></p>
  <p class="Mobile"><strong>Mobile</strong></p>
</body>

</html>

使用媒体查询创建响应程序的问题

Issue with creating a responsive program with media queries

html

css

responsive