Я пытаюсь сделать мою страницу мобильно реагирующей, но кажется, что медиа-запрос не работает, почему? - PullRequest
Новая
       6

Я пытаюсь сделать мою страницу мобильно реагирующей, но кажется, что медиа-запрос не работает, почему?

0 голосов
/ 27 апреля 2020

Итак, я хочу сделать игру-викторину, и теперь я хочу сделать ее немного адаптивной. Сначала я сделал рабочий стол, а теперь я делаю его за p c. Я пытаюсь использовать медиа-запрос, но кажется, что он не работает вообще. Что мне не хватает? Я пробовал с классом вместо тела, но это все еще не работает вообще. Я исключил js, потому что это было ненужно 

@import url(https://fonts.googleapis.com/css?family=Work+Sans:300,600);
body {
  font-size: 12px;
  font-family: 'Work Sans', sans-serif;
  color: #333;
  font-weight: 300;
  text-align: center;
  background-color: #f8f6f0;
}

h1 {
  font-weight: 300;
  margin: 0px;
  padding: 10px;
  font-size: 20px;
  background-color: #444;
  color: #fff;
}

.question {
  font-size: 3em;
  margin-bottom: 10px;
}

.answers {
  margin-bottom: 20px;
  text-align: left;
  display: inline-block;
  font-size: 3em;
}

.answers label {
  display: block;
  margin-bottom: 10px;
}

input[type=radio] {
  height: 2em;
  width: 2em;
}

button {
  font-family: 'Work Sans', sans-serif;
  font-size: 22px;
  background-color: #279;
  color: #fff;
  border: 0px;
  border-radius: 3px;
  padding: 20px;
  cursor: pointer;
  margin: 20px 10px;
  z-index: 3;
  display: block;
  font-size: 2em;
}

button:hover {
  background-color: #38a;
}

.slide {
  position: static;
  left: 0px;
  top: 0px;
  width: 100%;
  z-index: 1;
  display: none;
}

.active-slide {
  display: block;
  z-index: 2;
}

.quiz-container {
  position: static;
  height: auto;
  margin-top: 40px;
}

@media (max-width: 600px) {
  body {
    font-size: 20px;
  }
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="QuizTransition.css">
</head>

<body>
  <div class="container">
    <div class="quiz-container">
      <div id="quiz"></div>
    </div>
    <button id="previous">Intrebarea precedenta</button>
    <button id="next">Urmatoare intrebare</button>
    <div id="results"></div>
  </div>
  <script src="QuizLogic.js"></script>
</body>

</html>

Ответы [ 3 ]

0 голосов
/ 27 апреля 2020

Ваш код в порядке

Тест с чем-то ясно видимым. Я использую цвет фона, и он работает. Используйте его для более читабельного ... - 

The width=device-width key-value pair sets the width of the viewport to the width of the device. 
The initial-scale=1 key-value pair sets the initial zoom level when visiting the page.
  • Всегда держите небольшую область или диапазон вниз для экрана медиазапроса размер. 

@import url(https://fonts.googleapis.com/css?family=Work+Sans:300,600);
body {
  font-size: 12px;
  font-family: 'Work Sans', sans-serif;
  color: #333;
  font-weight: 300;
  text-align: center;
  background-color: #f8f6f0;
}

h1 {
  font-weight: 300;
  margin: 0px;
  padding: 10px;
  font-size: 20px;
  background-color: #444;
  color: #fff;
}

.question {
  font-size: 3em;
  margin-bottom: 10px;
}

.answers {
  margin-bottom: 20px;
  text-align: left;
  display: inline-block;
  font-size: 3em;
}

.answers label {
  display: block;
  margin-bottom: 10px;
}

input[type=radio] {
  height: 2em;
  width: 2em;
}

button {
  font-family: 'Work Sans', sans-serif;
  font-size: 22px;
  background-color: #279;
  color: #fff;
  border: 0px;
  border-radius: 3px;
  padding: 20px;
  cursor: pointer;
  margin: 20px 10px;
  z-index: 3;
  display: block;
  font-size: 2em;
}

button:hover {
  background-color: #38a;
}

.slide {
  position: static;
  left: 0px;
  top: 0px;
  width: 100%;
  z-index: 1;
  display: none;
}

.active-slide {
  display: block;
  z-index: 2;
}

.quiz-container {
  position: static;
  height: auto;
  margin-top: 40px;
}

@media (max-width: 1200px) {
  body {
    background: blue;
  }
}
@media (max-width: 600px) {
  body {
    background: red;
  }
}
@media (max-width: 400px) {
  body {
    background: yellow;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="QuizTransition.css" type="text/css">
</head>

<body>
  <div class="container">
    <div class="quiz-container">
      <div id="quiz"></div>
    </div>
    <button id="previous">Intrebarea precedenta</button>
    <button id="next">Urmatoare intrebare</button>
    <div id="results"></div>
  </div>
  <script src="QuizLogic.js"></script>
</body>

</html>
0 голосов
/ 27 апреля 2020

При работе с медиа-запросами, ориентированными на ширину, лучше всего начать с мобильного. Это означает, что первая часть вашего CSS должна быть стилями, которые являются стандартными для вашего веб-сайта и вообще не требуют медиазапросов для работы на ширине мобильной связи.

Затем вы добавляете медиазапрос, начиная с заданная ширина с использованием min-width, таким образом: 

@media (min-width: 720px) {
  body { background: red;}
}

В ваших медиа-запросах есть отверстие, в котором нет объявлений, но если вам нужна средняя область, синтаксис выглядит следующим образом: 

@media screen and (min-width: 768px) and (max-width: 880px) {
  body { background: pink;}
}

Надеюсь, это поможет.

0 голосов
/ 27 апреля 2020

Я пытался использовать ваш код здесь JS Fiddle .

Похоже, вы допустили небольшую ошибку в @media query 

 @media only screen and (max-width: 768px) {
  body {
    background-color: red;
  }
}

Надеюсь, что так и будет оказаться полезным. Пожалуйста go до W3 школ

...