Адаптивный макет с использованием медиазапросов - PullRequest
Новая
       18

Адаптивный макет с использованием медиазапросов

0 голосов
/ 22 декабря 2019

Я пытался реализовать свой первый Media Query, и я не могу понять, почему он не дал эффекта. У меня есть 4 столбца (элементы Flex), и я пытаюсь уменьшить это значение до 2 столбцов (элементы Flex) на экранах с разрешением менее 800 пикселей.

Я последовал примеру w3schools.

Буду очень признателен, если кто-нибудь посмотрит на мой код и скажет, что мне не хватает.

https://codepen.io/mrlondon/project/live/DdvONp/

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

* {
  box-sizing: border-box;
}

@media screen and(max-width:800px) {
  .column {
    flex: 50%;
    padding: 0 1%;
  }
}

body {
  width: 100%;
  margin: 0 auto;
  background-image: url("wallpaper2.jpg");
  background-repeat: repeat;
}

.header {
  width: 100%;
  background: black;
  height: 100px;
  color: white;
}

h1 {
  margin: 0 auto;
  position: relative;
  top: 30px;
  left: 15px;
  font-size: 2em;
  color: #f0c330;
}

ul {
  list-style-type: none;
  float: right;
  margin: auto;
  position: relative;
}

li {
  display: inline-block;
  padding-left: 20px;
  font-size: 1.4em;
}

.lastlist {
  padding-right: 65px;
}

.nav {
  text-decoration: none;
  color: #f0c330;
}

.nav:hover {
  color: white;
}

.wrapper {
  width: 75%;
  background: pink;
  margin: 0 auto;
  height: max-content;
  padding: 2%;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.column {
  flex: 0 1 25%;
  padding: 0 1%;
}

.gallery {
  width: 100%;
  margin-bottom: 4%;
  max-width: 100%;
}

.column img {
  width: 100%;
  max-width: 100%;
  border-radius: 10px;
  border: solid 2px #f0c330;
  vertical-align: middle;
}
<div class="header">
  <nav>
    <h1>Daniel Savva</h1>
    <ul>
      <li> <a class="nav" href="#">  Home</a> </li>
      <li> <a class="nav" href="#">  Gallery</a> </li>
      <li> <a class="nav" href="#">  About</a> </li>
      <li class="lastlist"> <a class="nav" href="#">  Contact</a> </li>
    </ul>
  </nav>
</div>
<div class="wrapper">

  <div class="row">

    <div class="column">

      <div class="gallery">

        <a target="_blank" href="https://www.youtube.com/watch?v=jySfU10IQu4">
          <img src="picture1.jpg" alt="Picture1">
        </a>
      </div>

      <div class="gallery">
        <a target="_blank" href="https://www.youtube.com/watch?v=S-9dxYcH7sg">
          <img src="picture55.jpg" alt="picture55">
        </a>
      </div>

      <div class="gallery">
        <a target="_blank" href="https://www.youtube.com/watch?v=jEgX64n3T7g">
          <img src="picture10.jpg" alt="picture10">
        </a>
      </div>
    </div>

    <div class="column">

      <div class="gallery">
        <a target="_blank" href="https://www.youtube.com/watch?v=hF-QqKiT1bI">
          <img src="picture2.jpg" alt="picture2">
        </a>
      </div>

      <div class="gallery">
        <a target="_blank" href="https://www.youtube.com/watch?v=QUvVdTlA23w">
          <img src="picture77.jpg" alt="picture77">
        </a>
      </div>

      <div class="gallery">
        <a target="_blank" href="https://www.youtube.com/watch?v=lVL-zZnD3VU">
          <img src="picture11.jpg" alt="picture11">
        </a>
      </div>
    </div>



    <div class="column">

      <div class="gallery">
        <a target="_blank" href="https://www.youtube.com/watch?v=K_9tX4eHztY">
          <img src="picture3.jpg" alt="picture3">
        </a>
      </div>

      <div class="gallery">
        <a target="_blank" href="https://www.youtube.com/watch?v=Nu__TzWfpss">
          <img src="picture66.jpg" alt="picture66">
        </a>
      </div>

      <div class="gallery">
        <a target="_blank" href="https://www.youtube.com/watch?v=S71_vIMQ0YY">
          <img src="picture12.jpg" alt="picture12">
        </a>
      </div>
    </div>

    <div class="column">

      <div class="gallery">
        <a target="_blank" href="https://www.youtube.com/watch?v=K_9tX4eHztY">
          <img src="picture45.jpg" alt="picture45">
        </a>
      </div>

      <div class="gallery">
        <a target="_blank" href="https://www.youtube.com/watch?v=Soa3gO7tL-c">
          <img src="picture9.jpg" alt="picture9">
        </a>
      </div>

      <div class="gallery">
        <a target="_blank" href="https://www.youtube.com/watch?v=_FrOQC-zEog">
          <img src="picture13.jpg" alt="picture13">
        </a>
      </div>
    </div>
  </div>

</div>

Ответы [ 3 ]

1 голос
/ 22 декабря 2019

Вам нужен пробел между and & (max-width-:800px).

Вам также нужно поместить медиазапрос в конец или увеличить вес селектора, иначе, другое правило для .column {flex: xx} оверидовит.

пример: 

* {
  box-sizing: border-box;
}

@media screen and (max-width:800px) {
  .row .column {/* increase selector wheight or send me after .column selector */
    flex  :  50%;
    padding: 0 1%;
  }
}


body {
  width: 100%;
  margin: 0 auto;
  background-image: url("wallpaper2.jpg");
  background-repeat: repeat;
}

.header {
  width: 100%;
  background: black;
  height: 100px;
  color: white;
}

h1 {
  margin: 0 auto;
  position: relative;
  top: 30px;
  left: 15px;
  font-size: 2em;
  color: #f0c330;
}

ul {
  list-style-type: none;
  float: right;
  margin: auto;
  position: relative;
}

li {
  display: inline-block;
  padding-left: 20px;
  font-size: 1.4em;
}

.lastlist {
  padding-right: 65px;
}

.nav {
  text-decoration: none;
  color: #f0c330;
}

.nav:hover {
  color: white;
}

.wrapper {
  width: 75%;
  background: pink;
  margin: 0 auto;
  height: max-content;
  padding: 2%;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.column {
  flex: 0 1 25%;
  padding: 0 1%;
}

.gallery {
  width: 100%;
  margin-bottom: 4%;
  max-width: 100%;
}

.column img {
  width: 100%;
  max-width: 100%;
  border-radius: 10px;
  border: solid 2px #f0c330;
  vertical-align: middle;
}
<div class="header">
  <nav>
    <h1>Daniel Savva</h1>
    <ul>
      <li> <a class="nav" href="#">  Home</a> </li>
      <li> <a class="nav" href="#">  Gallery</a> </li>
      <li> <a class="nav" href="#">  About</a> </li>
      <li class="lastlist"> <a class="nav" href="#">  Contact</a> </li>
    </ul>
  </nav>
</div>
<div class="wrapper">

  <div class="row">

    <div class="column">

      <div class="gallery">

        <a target="_blank" href="https://www.youtube.com/watch?v=jySfU10IQu4">
          <img src="picture1.jpg" alt="Picture1">
        </a>
      </div>

      <div class="gallery">
        <a target="_blank" href="https://www.youtube.com/watch?v=S-9dxYcH7sg">
          <img src="picture55.jpg" alt="picture55">
        </a>
      </div>

      <div class="gallery">
        <a target="_blank" href="https://www.youtube.com/watch?v=jEgX64n3T7g">
          <img src="picture10.jpg" alt="picture10">
        </a>
      </div>
    </div>

    <div class="column">

      <div class="gallery">
        <a target="_blank" href="https://www.youtube.com/watch?v=hF-QqKiT1bI">
          <img src="picture2.jpg" alt="picture2">
        </a>
      </div>

      <div class="gallery">
        <a target="_blank" href="https://www.youtube.com/watch?v=QUvVdTlA23w">
          <img src="picture77.jpg" alt="picture77">
        </a>
      </div>

      <div class="gallery">
        <a target="_blank" href="https://www.youtube.com/watch?v=lVL-zZnD3VU">
          <img src="picture11.jpg" alt="picture11">
        </a>
      </div>
    </div>



    <div class="column">

      <div class="gallery">
        <a target="_blank" href="https://www.youtube.com/watch?v=K_9tX4eHztY">
          <img src="picture3.jpg" alt="picture3">
        </a>
      </div>

      <div class="gallery">
        <a target="_blank" href="https://www.youtube.com/watch?v=Nu__TzWfpss">
          <img src="picture66.jpg" alt="picture66">
        </a>
      </div>

      <div class="gallery">
        <a target="_blank" href="https://www.youtube.com/watch?v=S71_vIMQ0YY">
          <img src="picture12.jpg" alt="picture12">
        </a>
      </div>
    </div>

    <div class="column">

      <div class="gallery">
        <a target="_blank" href="https://www.youtube.com/watch?v=K_9tX4eHztY">
          <img src="picture45.jpg" alt="picture45">
        </a>
      </div>

      <div class="gallery">
        <a target="_blank" href="https://www.youtube.com/watch?v=Soa3gO7tL-c">
          <img src="picture9.jpg" alt="picture9">
        </a>
      </div>

      <div class="gallery">
        <a target="_blank" href="https://www.youtube.com/watch?v=_FrOQC-zEog">
          <img src="picture13.jpg" alt="picture13">
        </a>
      </div>
    </div>
  </div>

</div>
0 голосов
/ 22 декабря 2019

Если я правильно понимаю ваш вопрос, все, что вам нужно добавить, это медиа-запрос, подобный этому (значение max-width в нем должно быть приспособлено к вашим фактическим требованиям): 

@media screen and (max-width: 600px) {
  .column {
    flex: 0 1 50%;
    padding: 0 1%;
  }
}

Устанавливаетширина от .column до 50% (вместо 25%), что приводит к макету из двух столбцов вместо четырех столбцов для экранов шириной 600 пикселей или менее. 

* {
  box-sizing: border-box;
}

@media screen and(max-width:800px) {
  .column {
    flex: 50%;
    padding: 0 1%;
  }
}

body {
  width: 100%;
  margin: 0 auto;
  background-image: url("wallpaper2.jpg");
  background-repeat: repeat;
}

.header {
  width: 100%;
  background: black;
  height: 100px;
  color: white;
}

h1 {
  margin: 0 auto;
  position: relative;
  top: 30px;
  left: 15px;
  font-size: 2em;
  color: #f0c330;
}

ul {
  list-style-type: none;
  float: right;
  margin: auto;
  position: relative;
}

li {
  display: inline-block;
  padding-left: 20px;
  font-size: 1.4em;
}

.lastlist {
  padding-right: 65px;
}

.nav {
  text-decoration: none;
  color: #f0c330;
}

.nav:hover {
  color: white;
}

.wrapper {
  width: 75%;
  background: pink;
  margin: 0 auto;
  height: max-content;
  padding: 2%;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.column {
  flex: 0 1 25%;
  padding: 0 1%;
}

.gallery {
  width: 100%;
  margin-bottom: 4%;
  max-width: 100%;
}

.column img {
  width: 100%;
  max-width: 100%;
  border-radius: 10px;
  border: solid 2px #f0c330;
  vertical-align: middle;
}

@media screen and (max-width: 600px) {
  .column {
    flex: 0 1 50%;
    padding: 0 1%;
  }
}
<div class="header">
  <nav>
    <h1>Daniel Savva</h1>
    <ul>
      <li> <a class="nav" href="#">  Home</a> </li>
      <li> <a class="nav" href="#">  Gallery</a> </li>
      <li> <a class="nav" href="#">  About</a> </li>
      <li class="lastlist"> <a class="nav" href="#">  Contact</a> </li>
    </ul>
  </nav>
</div>
<div class="wrapper">

  <div class="row">

    <div class="column">

      <div class="gallery">

        <a target="_blank" href="https://www.youtube.com/watch?v=jySfU10IQu4">
          <img src="picture1.jpg" alt="Picture1">
        </a>
      </div>

      <div class="gallery">
        <a target="_blank" href="https://www.youtube.com/watch?v=S-9dxYcH7sg">
          <img src="picture55.jpg" alt="picture55">
        </a>
      </div>

      <div class="gallery">
        <a target="_blank" href="https://www.youtube.com/watch?v=jEgX64n3T7g">
          <img src="picture10.jpg" alt="picture10">
        </a>
      </div>
    </div>

    <div class="column">

      <div class="gallery">
        <a target="_blank" href="https://www.youtube.com/watch?v=hF-QqKiT1bI">
          <img src="picture2.jpg" alt="picture2">
        </a>
      </div>

      <div class="gallery">
        <a target="_blank" href="https://www.youtube.com/watch?v=QUvVdTlA23w">
          <img src="picture77.jpg" alt="picture77">
        </a>
      </div>

      <div class="gallery">
        <a target="_blank" href="https://www.youtube.com/watch?v=lVL-zZnD3VU">
          <img src="picture11.jpg" alt="picture11">
        </a>
      </div>
    </div>



    <div class="column">

      <div class="gallery">
        <a target="_blank" href="https://www.youtube.com/watch?v=K_9tX4eHztY">
          <img src="picture3.jpg" alt="picture3">
        </a>
      </div>

      <div class="gallery">
        <a target="_blank" href="https://www.youtube.com/watch?v=Nu__TzWfpss">
          <img src="picture66.jpg" alt="picture66">
        </a>
      </div>

      <div class="gallery">
        <a target="_blank" href="https://www.youtube.com/watch?v=S71_vIMQ0YY">
          <img src="picture12.jpg" alt="picture12">
        </a>
      </div>
    </div>

    <div class="column">

      <div class="gallery">
        <a target="_blank" href="https://www.youtube.com/watch?v=K_9tX4eHztY">
          <img src="picture45.jpg" alt="picture45">
        </a>
      </div>

      <div class="gallery">
        <a target="_blank" href="https://www.youtube.com/watch?v=Soa3gO7tL-c">
          <img src="picture9.jpg" alt="picture9">
        </a>
      </div>

      <div class="gallery">
        <a target="_blank" href="https://www.youtube.com/watch?v=_FrOQC-zEog">
          <img src="picture13.jpg" alt="picture13">
        </a>
      </div>
    </div>
  </div>

</div>
0 голосов
/ 22 декабря 2019

Добавить метатег в заголовок 

<meta content="width=device-width, initial-scale=1" name="viewport" />
...