响应式网站不遵守 css 百分比

Question

当我们在全屏模式下将 window 尺寸缩小到 680 像素以下时，所有项目都显示在一列中。由于所有 css 都是以百分比定义的，为什么会发生这种情况？

.container{
    display:flex;
    flex-direction:column;
    justify-content: center;
    margin-top:5%;
    text-align:center;
    color:darkblue;
}

.img-container{
    display:flex;
    justify-content: center;
    align-items:center;
}

.lround{
    border-top-left-radius: 25%;
    border-bottom-left-radius: 25%;
}

.rround{
    border-top-right-radius: 25%;
    border-bottom-right-radius: 25%;
}

.small{
    width:12.5%;
}

#formWrapper{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    margin:0 auto;
    margin-top:5%;
    width:60%;
    border:solid 1px green;
}

input{
    width:40%;
    margin:2% 4%;
}

input{
    font-size:2vw;
}

<!DOCTYPE html>
<html>

<head>
  <title>Register</title>
  <!--<link rel="stylesheet" href="../public/css/header.css">-->

</head>



<body>
  <div class='container'>
    <img src="https://www.sailwbob.com/images/swb.png" alt="SwB">

    <div class='img-container'>
      <img class='lround small' src="https://www.sailwbob.com/images/img-1.png" alt="img-1">
      <img class='small' src="https://www.sailwbob.com/images/img-2.png" alt="img-1">
      <img class='small' src="https://www.sailwbob.com/images/img-3.png" alt="img-1">
      <img class='small' src="https://www.sailwbob.com/images/img-4.png" alt="img-1">
      <img class='small' src="https://www.sailwbob.com/images/img-5.png" alt="img-1">
      <img class='rround small' src="https://www.sailwbob.com/images/img-6.png" alt="img-1">
    </div>

    <!--<link rel="stylesheet" href="../public/css/register.css">-->
    <form>
      <div id='formWrapper'>
        <input type='text' placeholder='first name'>
        <input type='text' placeholder='last name'>
        <input type='tel' placeholder='mobile phone number'>
        <input type='email' placeholder='email'>
        <input type='password' placeholder='password'>
        <input type='password' placeholder='confirm password'>
      </div>
    </form>

  </div>
</body>

</html>

Answer 1

如果你让输入的边框突然消失，你就没有问题。边框以像素为单位，而不是以百分比为单位。当您缩小屏幕时，边框不会调整大小，但百分比会调整。

您可以添加一些 @media 来在缩小屏幕时更改输入的边距。

.container{
    display:flex;
    flex-direction:column;
    justify-content: center;
    margin-top:5%;
    text-align:center;
    color:darkblue;
}

.img-container{
    display:flex;
    justify-content: center;
    align-items:center;
}

.lround{
    border-top-left-radius: 25%;
    border-bottom-left-radius: 25%;
}

.rround{
    border-top-right-radius: 25%;
    border-bottom-right-radius: 25%;
}

.small{
    width:12.5%;
}

#formWrapper{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    margin:0 auto;
    margin-top:5%;
    width:60%;
    border:solid 1px green;
}

input{
    width:40%;
    margin:2% 4%;
}

input{
    font-size:2vw;
}
@media screen and (min-width: 500px) and (max-width: 700px) {
  input{
      margin:2% 3%;
  }
}
@media screen and (min-width: 300px) and (max-width: 500px) {
  input{
      margin:2% 2%;
  }
}
@media screen and (min-width: 0px) and (max-width: 300px) {
  input{
      margin:2% 1%;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Register</title>
  <!--<link rel="stylesheet" href="../public/css/header.css">-->

</head>

<body>
  <div class='container'>
    <img src="https://www.sailwbob.com/images/swb.png" alt="SwB">

    <div class='img-container'>
      <img class='lround small' src="https://www.sailwbob.com/images/img-1.png" alt="img-1">
      <img class='small' src="https://www.sailwbob.com/images/img-2.png" alt="img-1">
      <img class='small' src="https://www.sailwbob.com/images/img-3.png" alt="img-1">
      <img class='small' src="https://www.sailwbob.com/images/img-4.png" alt="img-1">
      <img class='small' src="https://www.sailwbob.com/images/img-5.png" alt="img-1">
      <img class='rround small' src="https://www.sailwbob.com/images/img-6.png" alt="img-1">
    </div>

    <!--<link rel="stylesheet" href="../public/css/register.css">-->
    <form>
      <div id='formWrapper'>
        <input type='text' placeholder='first name'>
        <input type='text' placeholder='last name'>
        <input type='tel' placeholder='mobile phone number'>
        <input type='email' placeholder='email'>
        <input type='password' placeholder='password'>
        <input type='password' placeholder='confirm password'>
      </div>
    </form>

  </div>
</body>

</html>

响应式网站不遵守 css 百分比

responsive website not obeying css percentages

css

responsive