Проблема с созданием адаптивной программы с медиа-запросами - PullRequest
Новая
       5

Проблема с созданием адаптивной программы с медиа-запросами

0 голосов
/ 25 марта 2020 

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, который должен появиться, один для людей, которые находятся на P C, другой на мобильном телефоне, для последнего я установил visibility: hidden;, чтобы он победил ' Если вы не находитесь на экране с достаточно маленьким размером, я создал медиазапрос, скопировал и вставил div, который хотел использовать для мобильных пользователей с именем Mobile, внутри медиазапроса.

Я только удалил visibility: hidden; тег, который показывает, но он не работает, тогда экран меньше, текст не меняется, кто-нибудь может помочь?

Программа Media Query

1 Ответ

1 голос
/ 25 марта 2020

Пара вопросов:

  1. Вы должны использовать тег meta viewport.
  2. В своем медиазапросе вы никогда не устанавливаете элемент для отображения или изменить видимость 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>
...