时间戳

首页 > 解决方案 > CSS 响应式布局

html - CSS 响应式布局

问题描述

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 像素时，所有元素都应该相互堆叠

并且当设备小于 500px 时，所有元素都应该相互堆叠，但 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 页面的代码类型，或者我是否只是过度复杂化，而我经常这样做。

标签： htmlcssresponsive-design

解决方案

好吧，我想，你应该试试

@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

推荐阅读