0

Очень прощу помощи, начал изучать фронт - и поймал ступор на этом задании. Мне нужно с помощью flex+float понимания техник, сделать через медиа-запросы такое задание:

"Используйте вложенные файлы с фиксированным макетом. Создайте адаптивный макет веб-страницы, используя следующие медиазапросы: очень маленькие устройства (телефоны, менее 768 пикселей) (1 изображение) небольшие устройства (планшеты, 768 пикселей и более) (2 изображения) средние устройства (рабочие столы, 992 пикселей и up) Большие устройства (большие рабочие столы, 1200px и выше)"

* {
    box-sizing: border-box;
}

.page-wrap {
    width: 800px;
    margin: 20px auto;
}

.main-story {
    position: relative;
    margin: 0 0 25px 0;
}

img {
    display: block;
}

a {
    color: lightblue;
}

.story-intro {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.75);
    padding: 20px;
    color: white;
}

h1 {
    font-size: 4em;
}
h1, h2 {
    margin: 0 0 10px 0;
}

.story-intro h1 {
    font-size: 2.5em;
}
.story-intro p {
    margin: 0;
}

.sub-stories {
    overflow: hidden;
    margin: 0 0 25px 0;
}

.sub-story {
    float: left;
    width: 250px;
    margin-right: 25px;
    position: relative;
    font-size: 80%;
}

.last {
    margin-right: 0;
}
 /* Медиа-запросы пробовал писать я сам :(
}
@media screen (max-width: 768px) {

   .story-intro, p, h1, img {
       width: 100vw;
       position: relative;
        }
    .sub-story {
        float: none;
        }
    }

 @media screen (min-width: 768px) and (max-width: 992px) {
 .page-wrap, .sub-stories{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: auto;

}

.main-story, .sub-story:first-child, .sub-story:last-child,  .last, h1, h2, p{
    width: 50%;
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
  @media screen (min-width: 992px) and (max-width: 1200px) {

}
@media screen (min-width: 1200px) {

}
*/
<!-- This is a piece of code -->
<div class="page-wrap">

    <h1>Make This Responsive</h1>

    <p>While maintaining the heirarchy of importance.</p>

    <article class="main-story">

        <img src="http://f.cl.ly/items/2e3c2a1Z0D1H3u0W2K12/shera.jpg" alt="Sha Ra Rocking"/>

        <div class="story-intro">
            <h1>Most Important Story</h1>
            <p>This article has the most visual weight. <a href="http://nebezial.deviantart.com/art/she-ra-115867096">image source.</a></p>
        </div>

    </article>

    <section class="sub-stories">

        <article class="sub-story">
            <img src="http://placekitten.com/250/350"/>
            <div class="story-intro">
                <h2>Less Important Story</h2>
                <p>This story has less visual weight.</p>
            </div>
        </article>

        <article class="sub-story">
            <img src="http://placecage.com/250/350"/>
            <div class="story-intro">
                <h2>Less Important Story</h2>
                <p>This story has less visual weight.</p>
            </div>
        </article>

        <article class="sub-story last">
            <img src="http://placebear.com/250/350"/>
            <div class="story-intro">
                <h2>Less Important Story</h2>
                <p>This story has less visual weight.</p>
            </div>
        </article>

    </section>

</div>
 

P.s. буду признателен и благодарен за любую помощь. К критике отношусь отлично, так что можете себя не сдерживать. Все что смог - сделал(запросы пробовал писать сам), понимаю плохо, путаюсь .. но желание познать меньше не стало :)

6
  • Приветствую, с наступающим. Запускать не пробовал, но первый and явно лишний. Пример: @media screen (min-width: 768px) and (max-width: 992px)
    – Denis640Kb
    30 дек 2019 в 23:50
  • благодарю, действительно )) 30 дек 2019 в 23:52
  • Дай ссылку на задание и как это должно выглядеть
    – user355286
    30 дек 2019 в 23:58
  • мне дали кусок кода в сss/html. Я просто подключил 1 ко 2 (добавил недостающие куски кода). Cамо задание я указал выше, больше ничего нет Единственное, картинка что первая идет - не подгрузилась, т.е. по ссылке я перехожу и её показывает, а тут не показывает почему-то :( 31 дек 2019 в 0:02
  • дай изначальный код
    – user355286
    31 дек 2019 в 0:03

2 ответа 2

1

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

* {
    box-sizing: border-box;
}

img {
  width: 100%;
  display: block;
}

h1, p , h2 {
  text-align: center;
}

.page-wrap {
  max-width: 800px;
  margin: 20px auto;
}

.main-story {
  width: 100%;
  margin-bottom: 25px;
}

.main-story,
.sub-story {
  position: relative;
}

.main-story .story-intro,
.sub-story .story-intro {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.75);
  color: white;
}

.sub-stories {
  display: flex;
  flex-wrap: wrap;
}

.sub-story {
  width: 250px;
  flex-grow: 1;
  margin-right: 25px;
  margin-bottom: 25px;
}

.sub-story:last-child {
  margin-right: 0;
}

@media (max-width: 834px) {
  .sub-story:nth-child(2) {
    margin-right: 0;
  }
  
  .sub-story:nth-child(3) {
    margin: 0 25px;
  }
}

@media (max-width: 558px) {
  .sub-story:nth-child(1) {
    margin: 25px 25px;
  }
  
  .sub-story:nth-child(2) {
    margin: 25px 25px;
  }
}
<div class="page-wrap">

  <h1>Make This Responsive</h1>

  <p>While maintaining the heirarchy of importance.</p>

  <article class="main-story">

    <img src="https://picsum.photos/1980" alt="Sha Ra Rocking" />

    <div class="story-intro">
      <h1>MAIN</h1>
      <p>This article has the most visual weight. <a href="https://picsum.photos/250/35">image source.</a></p>
    </div>

  </article>

  <section class="sub-stories">

    <article class="sub-story">
      <img src="https://picsum.photos/1980" />
      <div class="story-intro">
        <h2>SUB 1</h2>
        <p>This story has less visual weight.</p>
      </div>
    </article>

    <article class="sub-story">
      <img src="https://picsum.photos/1980" />
      <div class="story-intro">
        <h2>SUB 2</h2>
        <p>This story has less visual weight.</p>
      </div>
    </article>

    <article class="sub-story">
      <img src="https://picsum.photos/1980" />
      <div class="story-intro">
        <h2>SUB 3</h2>
        <p>This story has less visual weight.</p>
      </div>
    </article>

  </section>

</div>

0

Я оч благодарен кто мне помог, я представляю свой финальный вариант сss ответа (html в задании) - если будут у кого замечания или предложения, прошу не стесняться - мне интересно ваше мнение.

*{
  padding: 0;
  margin: 0;
  border: 0;
}
*,*:before,*:after{
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
:focus,:active{outline: none;}
a:focus,a:active{outline: none;}

nav,footer,header,aside{display: block;}

html,body{
  height: 100%;
  width: 100%;
  font-size: 100%;
  line-height: 1;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
input,button,textarea{font-family:inherit;}

input::-ms-clear{display: none;}
button{cursor: pointer;}
button::-moz-focus-inner {padding:0;border:0;}
a, a:visited{text-decoration: none;}
a:hover{text-decoration: none;}
ul li{list-style: none;}
img{vertical-align: top;}

h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight: 400;}

*{
    box-sizing: border-box;
}

.page-wrap {
    width: 800px;
    margin: 20px auto;
}

.main-story {
    position: relative;
    margin: 0 0 25px 0;
}

img {
    display: block;
}

a {
    color: lightblue;
}

.story-intro {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.75);
    padding: 20px;
    color: white;
}

h1 {
    font-size: 4em;
}
h1, h2 {
    margin: 0 0 10px 0;
}

.story-intro h1 {
    font-size: 2.5em;
}
.story-intro p {
    margin: 0;
}

.sub-stories {
    overflow: hidden;
    margin: 0 0 25px 0;
}

.sub-story {
    float: left;
    width: 250px;
    margin-right: 25px;
    position: relative;
    font-size: 80%;
}

.last {
    margin-right: 0;
}


@media (min-width: 993px) and (max-width: 1200px) {
  .sub-stories {
    display: flex;
    flex-wrap: wrap;
    }
.sub-story {
    flex-grow: 1;
    }
     img {
    width: 100%;
}
  .sub-story:nth-child(1),
   .sub-story:nth-child(2),
    .last {
    margin: 0;
     }
    }
@media (min-width: 769px) and (max-width: 992px) {
  .sub-stories {
    display: flex;
    flex-wrap: wrap;
    }
.sub-story {
    flex-grow: 1;
    }
  img {
    width: 100%;
}

  .sub-story:nth-child(1) {
    margin: 0 25px 25px 0px;
  }
  
  .sub-story:nth-child(2) {
    margin: 0 0px 25px 25px;
  }
  .last {
    margin: 0 25px ;
}
}
@media (max-width: 768px) {
 .story-intro, .main-story, img{
       width: 100vw;
        }
    .sub-story {
        float: none;
        }
  .sub-story:nth-child(1),
  .sub-story:nth-child(2){
    margin-bottom: 25px;
    }
}

   

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.