html - Flexbox，移动响应式

Question

我怎样才能让这个 flex 盒响应移动设备？我希望在移动屏幕上获得与桌面版本相同的结果，我知道问题是由 Flexbox 和移动屏幕尺寸的响应能力引起的，但我该如何解决这样的问题呢？我认为这与 flex 盒的宽度有关。

How it looks on desktop

How it looks on mobile

    <style>

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

.btn-allow{
  border-radius: 80px;
  background-image: linear-gradient(135deg, #5F25A1, #4440BC);
  color: white;
  transition: 0.5s ease;
  font-size: 18px;
  line-height: 1em;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.1em;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  border: 1px solid #4440BC;
  height: 60px;
  width: 100%;
  padding: 20px 30px;
  margin-right: 50px
}
btn-login:focus{
  color: #3498db;
  box-shadow: inset 2px 2px 5px #BABECC,
             inset -5px -5px 10px #ffffff73;
}
.btn-deny{
  border-radius: 80px;
  background-image: rgb(217, 217, 217);
  color: rgb(26, 26, 26);
  transition: 0.5s ease;
  font-size: 18px;
  line-height: 1em;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.1em;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  border: none;
  height: 60px;
  width: 100%;
  padding: 20px 30px;
  margin-left: 50px
}
.btn-deny:focus{
  color: #3498db;
  box-shadow: inset 2px 2px 5px #BABECC,
             inset -5px -5px 10px #ffffff73;
}
.btn-allow:hover{
  color: #3498db;
  box-shadow: inset 2px 2px 5px #0a0a0a27,
 
}
.fa-question-circle::before {
  cursor: pointer;
}
    .d-flex {
      display: flex;
      flex-wrap: wrap;
      padding: 1rem;
      flex-direction: column;
      width: 100%;/*can edit as per requirement*/
    }

    .d-flex .col .child {
      display: flex;
      flex-wrap: wrap;
    }

    .d-flex .col {
      display: flex;
      flex-wrap: wrap;
      padding: 1rem 0;
      justify-content: space-between;
    }

    .d-flex p {
      padding: 0 1rem;
    }
    </style>
    <!--ADD THIS LINE TO GET FONTAWESOME ICONS IN HEAD TAG-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
    <div class="d-flex">
      <div class="col">
        <div class="child">
          <span class="fas fa-user"></span>
          <p>View, manage and publish your personal data</p>
        </div>
        <span class="fas fa-info"></span>
      </div>
      <div class="col">
        <div class="child">
          <span class="fas fa-user"></span>
          <p>View, manage and store your Contacts</p>
        </div>
        <span class="fas fa-info"></span>
      </div>
      <div class="col">
        <div class="child">
          <span class="fas fa-user"></span>
          <p>View your technicaldata*</p>
        </div>
        <span class="fas fa-info"></span>
      </div>
      <div class="d-flex">
     <div class="col">
      <div class="child">
<button class="btn-deny" type="submit" name="deny" >Deny</button>
</div>
<div class="childallow">
<button class="btn-allow" type="submit" name="allow" >Allow</button>
  </div>
</div>
    </div>

Answer 1

您应该使用 CSS 媒体查询来使移动设备具有响应能力或您认为它在移动屏幕设备上的外观。

典型的媒体查询如下所示:

@media screen and (max-width:650px;){
.col{
    width:100%;
    }
}

通过这种方式，您可以根据不同的屏幕尺寸设置各种元素的样式。

不同设备的屏幕分辨率如下:

• 移动设备(智能手机)最大宽度:480px。
• 低分辨率平板电脑和 Ipad 最大宽度:767 像素。
• 平板电脑 Ipad 纵向模式最大宽度:1024 像素。
• 桌面最大宽度:1280px。
• 尺寸巨大(更大的屏幕)最大宽度:1281 像素及以上。