CSS адаптивный макет - PullRequest
Новая
       5

CSS адаптивный макет

0 голосов
/ 15 февраля 2019

HTML-код: 

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<header>
    Header
</header>

<nav>
    Nav
</nav>

<article>
    Article
</article>

<div>
    <aside>
        Aside
    </aside>

    <section>
        Section
    </section>
</div>

<footer>
    Footer
</footer>

<body>
</body>

</html>

CSS-код: 

header {
  background-color: cornflowerblue;
  height: 60px;
  padding: 0px;
  margin: 0px;
  text-align: center;
  width: 100%;
}

nav {
  background-color: khaki;
  height: 50px;
  padding: 0px;
  margin: 0px;
  text-align: center;
  width: 100%;
}

article {
  background-color: darkseagreen;
  height: 180px;
  padding: 0px;
  margin: 0px;
  width: 70%;
  display: inline-block;
  text-align: center;

}

div {
  padding: 0px;
  margin: 0px;
  float: right;
  display: inline-block;
  width: 30%;
}

aside {
  background-color: goldenrod;
  height: 90px;
  padding: 0px;
  margin: 0px;
  text-align: center;
}

section {
  background-color: lightsteelblue;
  height: 90px;
  padding: 0px;
  margin: 0px;
  text-align: center;
}

footer {
  background-color: lemonchiffon;
  height: 40px;
  padding: 0px;
  margin: 0px;
  text-align: center;
  width: 100%;
}

body {
  background-color: black;
  font-size: 2em; 
  height: 60px;
  padding: 0px;
  margin: 0px;
  text-align: center;
  width: 100%;
}

Очень простое кодирование, просто пытаюсь понять, как создать адаптивную страницу.Я пытаюсь сделать так, чтобы при ширине устройства меньше 800 пикселей все элементы должны располагаться друг над другом

А когда устройство меньше 500 пикселей, все элементы должны располагаться друг над другом, кроме элементов Aside и Sectionдолжен исчезнуть.

Я подумал, что мне нужно использовать область просмотра, и нашел учебник с кодом, подобным следующему: 

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  ...continued
}

Не уверен, что это тип кода, который мне нужно добавить в мой CSSстраница или если я просто слишком усложняю это, что я делаю часто.

1 Ответ

0 голосов
/ 15 февраля 2019

Окей, я думаю, вы должны попробовать это 

@media only screen (min-width:500px) and (max-width: 800px) {
 aside {                                                          
  display:none 
 }
 section {
  display:none
 }                                                                          
}

, и это может помочь вам https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp

...