为桌面视图、平板电脑视图和移动设备构建小型响应式网页设计

Question

我是编码新手，正在尝试弄清楚如何将 HTML、CSS 和媒体查询一起使用，以在桌面视图中并排创建一个由相等容器组成的 3 项菜单。

在平板电脑视图中，菜单项转移到第一行的 2 个菜单项，第三个菜单项转移到第二行，但跨越了第一行的 2 个菜单项的长度。

在移动视图中，所有 3 个菜单项都堆叠在一起。见下图。我的桌面断点是 992px 或更大，平板视图是 768px 和 991px，移动设备是 990px 或更小。

我写了以下 HTML 和 CSS 试图复制图像显示的内容。我的菜单项不响应我在 css 文件中输入的媒体查询。我只能为项目使用基本的响应式框架。

如有任何帮助或指导，我们将不胜感激。

* {
  box-sizing: border-box;
}

h1 {
  font-family: calibri, sans-serif;
  width: 100%;
  margin: 10px;
  text-align: center;
}

div.container1 {
  background-color: #A0A0A0;
  font-family: calibri, sans-serif;
  width: 400px;
  border: 1px solid black;
  float: left;
  margin: 10px;
  overflow: hidden;
}

div.container2 {
  background-color: #A0A0A0;
  font-family: calibri, sans-serif;
  width: 400px;
  border: 1px solid black;
  float: left;
  margin: 10px;
  overflow: hidden;
}

div.container3 {
  background-color: #A0A0A0;
  font-family: calibri, sans-serif;
  width: 400px;
  border: 1px solid black;
  float: left;
  margin: 10px;
  overflow: hidden;
}

div#menu1 {
  font-family: calibri, sans-serif;
  height: 20px;
  width: 125px;
  background-color: #FF66B2;
  float: right;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  text-align: center;
  color: #000000;
  font-weight: bold;
}

div#menu2 {
  font-family: calibri, sans-serif;
  height: 20px;
  width: 125px;
  background-color: #990000;
  float: right;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  text-align: center;
  color: #FFFFFF;
  font-weight: bold;
}

div#menu3 {
  font-family: calibri, sans-serif;
  height: 20px;
  width: 125px;
  background-color: #FFE5CC;
  float: right;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  text-align: center;
  color: #000000;
  font-weight: bold;
}

p {
  font-family: calibri, sans-serif;
  margin-left: 10px;
  margin-right: 10px;
}


/* For tablets and large phones: */

@media (min-width: 768px) and (max-width: 991px) {
  background-color: green;
  .col-m-1 {
    width: 25%;
  }
  .col-m-2 {
    width: 25%;
  }
  .col-m-3 {
    width: 50%;
  }
}


/* For Desktop */

@media only screen and (min-width:992px) {
  .col-1 {
    width: 33.33%;
  }
  .col-2 {
    width: 33.33%;
  }
  .col-3 {
    width: 33.33%;
  }
}

<h1>Our Menu</h1>

<div class="container1 .col-1 .col-m-1">
  <div id="menu1">Chicken</div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor
  </p>
</div>

<div class="container2 .col-2 .col-m-2">
  <div id="menu2">Beef</div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor.
  </p>
</div>

<div class="container3 .col-3 .col-m-3">
  <div id="menu3">Sushi</div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor.
  </p>
</div>

桌面：

平板电脑：

手机：

Answer 1

你检查对了吗？当我检查时，我得到了每件物品的完美排列不要这样使用使用 div 容器然后在 css 中使用 flex 或 block 或任何你想要的那会更容易使用在 css /* 对于平板电脑和大手机：*/ 在此之下有一个错误你不要为“backgorund-color:green”设置元素

Answer 2

用 class container-box 将所有容器包装在一个新的 <div> 容器中，并向其中添加以下 CSS 样式。

.container-box {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

将这些修改应用于您的代码：

* {
  box-sizing: border-box;
}

h1 {
  font-family: calibri, sans-serif;
  width: 100%;
  margin: 10px;
  text-align: center;
}

.container-box {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

div.container1 {
  background-color: #A0A0A0;
  font-family: calibri, sans-serif;
  width: 400px;
  border: 1px solid black;
  float: left;
  margin: 10px;
  overflow: hidden;
}

div.container2 {
  background-color: #A0A0A0;
  font-family: calibri, sans-serif;
  width: 400px;
  border: 1px solid black;
  float: left;
  margin: 10px;
  overflow: hidden;
}

div.container3 {
  background-color: #A0A0A0;
  font-family: calibri, sans-serif;
  width: 400px;
  border: 1px solid black;
  float: left;
  margin: 10px;
  overflow: hidden;
}

div#menu1 {
  font-family: calibri, sans-serif;
  height: 20px;
  width: 125px;
  background-color: #FF66B2;
  float: right;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  text-align: center;
  color: #000000;
  font-weight: bold;
}

div#menu2 {
  font-family: calibri, sans-serif;
  height: 20px;
  width: 125px;
  background-color: #990000;
  float: right;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  text-align: center;
  color: #FFFFFF;
  font-weight: bold;
}

div#menu3 {
  font-family: calibri, sans-serif;
  height: 20px;
  width: 125px;
  background-color: #FFE5CC;
  float: right;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  text-align: center;
  color: #000000;
  font-weight: bold;
}

p {
  font-family: calibri, sans-serif;
  margin-left: 10px;
  margin-right: 10px;
}


/* For tablets and large phones: */

@media (min-width: 768px) and (max-width: 991px) {
  background-color: green;
  .col-m-1 {
    width: 25%;
  }
  .col-m-2 {
    width: 25%;
  }
  .col-m-3 {
    width: 50%;
  }
}


/* For Desktop */

@media only screen and (min-width:992px) {
  .col-1 {
    width: 33.33%;
  }
  .col-2 {
    width: 33.33%;
  }
  .col-3 {
    width: 33.33%;
  }
}

<h1>Our Menu</h1>

<div class="container-box">
  <div class="container1 .col-1 .col-m-1">
    <div id="menu1">Chicken</div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor
    </p>
  </div>

  <div class="container2 .col-2 .col-m-2">
    <div id="menu2">Beef</div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor.
    </p>
  </div>

  <div class="container3 .col-3 .col-m-3">
    <div id="menu3">Sushi</div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor.
    </p>
  </div>
</div>

Answer 3

我稍微修改了您的代码并使用 flexbox 和 nth-child 选择器完成了此操作。正是您在 3 个示例屏幕截图中要求的，采用移动优先方法完成。

* {
  box-sizing: border-box;
}
    
h1 {
  font-family: calibri, sans-serif;
  width: 100%;
  margin: 10px;
  text-align: center;
}

.flex-container .item {
  background-color: #A0A0A0;
  border: 1px solid black;
  font-family: calibri, sans-serif;
  margin: 1rem;
  overflow: hidden;
  padding: 1rem;
}
.flex-container .item .menu {
  height: 20px;
  width: 125px;
  float: right;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  text-align: center;
  color: #000000;
  font-weight: bold;
  
  transform: translate(1rem, -1rem)
}
.flex-container .item:nth-child(3n+1) .menu {
  background-color: #FF66B2;
}
.flex-container .item:nth-child(3n+2) .menu {
  background-color: #990000;
  color: white;
}
.flex-container .item:nth-child(3n+3) .menu {
  background-color: #FFE5CC;
}

.flex-container .item > *:nth-child(2) {
  margin-top: 0;
}
.flex-container .item > *:nth-last-child(1) {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .flex-container {
    display: flex;
    flex-wrap: wrap;
  }
  .flex-container .item {
    width: calc(50% - 2rem);
  }
  .flex-container .item:nth-child(3n+3) {
    width: calc(100% - 2rem);
  }
}
@media (min-width:992px) {
  .flex-container .item,
  .flex-container .item:nth-child(3n+3){
    width: calc((100% / 3) - 2rem);
  }
}

<h1>Our Menu</h1>

<div class="container flex-container">
  <div class="item">
    <div class="menu">Chicken</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
  </div>
  <div class="item">
    <div class="menu">Beef</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
  </div>
  <div class="item">
    <div class="menu">Sushi</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
  </div>
  <div class="item">
    <div class="menu">Chicken</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
  </div>
  <div class="item">
    <div class="menu">Beef</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
  </div>
  <div class="item">
    <div class="menu">Sushi</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
  </div>
</div>

为桌面视图、平板电脑视图和移动设备构建小型响应式网页设计

Building a small responsive web design for desktop view, tablet view, and mobile

html

css