html-为桌面视图、tablet视图和移动设备构建一个小型响应式web设计

网络安全监督员 lv.2

发布时间：2022-09-02 09:48:50 263

相关标签： # css

我对编码还很陌生，并试图弄清楚如何将HTML、CSS和媒体查询结合使用，在桌面视图中创建一个由相等容器并排组成的3项菜单。

在tablet view中，菜单项移动到第一行的2个菜单项，第三个菜单项移动到第二行，但跨越第一行的2个菜单项的长度。

在移动视图中，所有3个菜单项一个叠在另一个上。请参见下面的图片。我的桌面断点为992px或更高，tablet view为768px和991px，mobile为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>

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。