Question

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>

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

我创建了2个应显示的divs，一个是给PC上的人的，另一个是给移动设备上的人的，因为后者我将其设置为visibility: hidden;，所以除非您在足够小的屏幕尺寸上，然后我创建了媒体查询，然后在媒体查询中复制并粘贴了要用于名为Mobile的移动用户的div。

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

Media Query Program

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>

使用媒体查询创建响应程序时遇到问题

1 个答案: