медиазапросы не работают на экране мобильного телефона - PullRequest
Новая
       20

медиазапросы не работают на экране мобильного телефона

1 голос
/ 08 января 2020

Я создал компонент с одной ценой, используя сетку. Для мобильного экрана размером 375 пикселей я хочу, чтобы макет сетки стал единым целым, чтобы он превратился в 2 строки из двух элементов div вместо одного столбца с двумя элементами div. Медиа-запросы, которые я установил для мобильного телефона, не работают для отображения ожидаемых результатов.

HTML КОД: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <link rel="stylesheet" href="style.css">
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link href="https://fonts.googleapis.com/css?family=Karla:400,700&display=swap" rel="stylesheet">
  <title>Frontend Mentor | Single Price Grid Component</title>
</head>
<body>
  <div class="container">
  <div class="row">
    <div class="box1">
      <h2>Join our community</h2>
      <h3>30-day, hassle-free money back guarantee</h3>
      <p>Gain access to our full library of tutorials along with expert code reviews.<br> 
      Perfect for any developers who are serious about honing their skills.</p>
    </div>
    <div class="grid">
    <div class="box2">
      <h3>Monthly Subscription</h3>
      <div><span class="big">$29</span><span class="light">per month</span></div>
      <p>Full access for less than $1 a day</p>
      <input type="submit" value="Sign Up" class="submit">
    </div>
    <div class="box3">
      <h3>Why Us</h3>
      <ul class="light">`enter code here`
        <li>Tutorials by industry experts</li>
        <li>Peer &amp; expert code review</li>
        <li>Coding exercises</li>
        <li>Access to our GitHub repos</li>
        <li>Community forum</li>
        <li>Flashcard decks</li>
        <li>New videos every week</li>
      </ul>
    </div>
    </div>
    </div>
    </div>
  </body>
</html>

CSS СТИЛИ: 

body,html {
  margin:0;
  padding:0;
  box-sizing: border-box;
  font: 16px 'Karla', sans-seriff;
}

.container { max-width: 1440px; }

.row {
  width: 50%;
  height: 50%;
  margin: 110px 0 0 350px;
  border-radius: 10px;
  box-shadow: 0 0 0 10px hsl(204, 43%, 93%);
}

.box1 { padding: 15px 10px 15px 30px; }

h2 { color: hsl(179, 62%, 43%); }

.box1 h3 { color: greenyellow; }

.box1 p { 
  line-height: 25px;
  color: hsl(218, 22%, 67%);
}

.grid {
  display:grid;
  grid-template-columns: repeat(2, 1fr) ;
  text-align: left;
  color: hsl(204, 43%, 93%);
}

.box2 {
  background-color: hsl(179, 84%, 27%);
  border-bottom-left-radius: 10px;
  color: white;
  padding-left: 35px;
}

.box2 h3 { padding-top: 10px; }

.big {
  font-size: 30px;
  padding-right: 15px;
}

.light { opacity: 80%; }

.box2 p { margin-bottom: 22px; }

.submit {
  background-color: greenyellow;
  border: none;
  padding: 10px 95px;
  color: yellow;
  font-weight: 700;
  margin-bottom: 30px;
  border-radius: 7px;
  box-shadow: -10px -10px 7px 10px hsl(179, 84%, 27%),
  10px 10px 7px 10px hsl(179, 84%, 27%);
}

.submit:hover { background-color:rgb(141, 223, 19); }

.box3 {
  background-color: hsla(179, 85%, 33%, 0.918);
  border-bottom-right-radius: 10px;
  color: white;
}

ul { list-style: none; }

.box3 h3 { margin-left: 40px; }

/*----------MEDIA QUERIES----------*/

@media only screen and (max-device-width: 375px) {
  .grid div {
    display: grid;
    grid-template-columns: 1fr;
  }
}

Это должно выглядеть так на мобильном телефоне

Ответы [ 3 ]

3 голосов
/ 08 января 2020

Дело в том, что вы ссылаетесь на div внутри .grid вместо изменения макета сетки. Вы создаете новый в этом компоненте .grid. 

@media only screen and (max-width: 375px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

И я бы предпочел использовать max-width вместо max-device-width.

max-width - это ширина цели область отображения, например, max-device-width браузера - это ширина всей области отображения устройства, то есть фактического экрана устройства.

2 голосов
/ 08 января 2020

Продолжая от ответа @ snoh666, нет такой вещи, как max-device-width. Правильный способ написать это max-width.

0 голосов
/ 08 января 2020

Используйте этот код, и он будет точно таким же, как файл изображения, которым вы поделились. 

@media only screen and (max-width: 375px) {
  .grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .container {
    padding: 25px;
  }

  .row {
    margin: 0;
    width: 100%;
  }
}
...