Issue with creating a responsive program with media queries

问题

I'm trying to create a simple responsive program, that will change the text depending on the screen size.

I created 2 div tags that should show up, one is for people who are on PC and another one on mobile, for the latter I have set it to visibility: hidden; so it won't show unless you are on a small enough screen size, then I created media query and copy and pasted the div I wanted to use for mobile users named Mobile, inside the media query.

I only removed the visibility: hidden; tag so it shows, but it's not working then the screen is smaller the text doesn't change, can anyone help?

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>

回答1:

A couple issues:

You should use the meta viewport tag.
In your media query, you never set the element to display or change the visibility. CSS reads ALL of your styles, so you need to actually change the property.

In the example below, you see I set the display property on both of your elements - inside and outside of the 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>

来源：https://stackoverflow.com/questions/60854834/issue-with-creating-a-responsive-program-with-media-queries

标签

html

css

responsive