Flexbox，移动响应

Question

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

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%;
    }
}

通过这种方式，您可以针对各种屏幕尺寸设置各种元素的样式。

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

手机（智能手机）max-width：480px。
低分辨率平板电脑和 Ipad max-width：767px。
平板电脑 Ipad 纵向模式 max-width：1024px。
桌面max-width：1280px。
超大尺寸（更大的屏幕）max-width：1281px 和更大。

Flexbox，移动响应

Flexbox, mobile responsive

html

css

mobile

flexbox

responsive