如何构造 html 以利用媒体查询

Question

我正在尝试设计一个可在桌面和移动设备上运行的注册页面 phone。要注册，我需要 6 个项目。我想在桌面上有 3 行，每行有 2 个项目。在移动设备上，我想创建 2 个组，每个组有 3 行，每行 1 个项目。我想为移动网站添加后退和下一步按钮，以便在两组之间切换。

我可以通过创建两组不同的 html 来做到这一点（见片段），但想看看是否有办法用一组 html 来做到这一点，然后只是媒体查询转变。我可以更改 html，但我想获得指定的结果。

const wrap1 = document.getElementById('wrap1')  
const wrap2 = document.getElementById('wrap2')   

function next(){   
   wrap1.classList.add('hide')
   wrap2.classList.remove('hide')   
}

function back(){   
   wrap2.classList.add('hide')
   wrap1.classList.remove('hide')   
}

#one{
display:flex;
flex-direction:column;
align-items:center;
border:solid 1px green;
}

.done{
display:flex;
margin:2% 0;
}

.ione{
margin:0 2%;}

h3{
text-align:center;
}

#two{
margin-top:10%;
border:solid 1px green;}

.dtwo{
display:flex;
flex-direction:column;
align-items:center;
margin-top:5%;


}

.itwo{
width:50%;
margin:2% 0;
}

button{
display:block;
margin:0 auto;}

.hide{
display:none;}

<h3> how to convert the first form to the second form</h3>

<form id='one'>
   <div class='done'>
      <input class='ione' type='text' placeholder='first name'>
      <input class='ione'  type='text' placeholder='last name'>
   </div>
   <div class='done'>
      <input class='ione'  type='tel' placeholder='phone number'>
      <input class='ione'  type='email' placeholder='email'>
   </div>
   <div class='done'>
      <input class='ione'  type='password' placeholder='password'>
      <input class='ione'  type='password' placeholder='confirm password'>
    </div>
</form>


<form id='two'>
   <div id='wrap1'>
      <div class='dtwo'>
        <input class='itwo' type='text' placeholder='first name'>
        <input class='itwo'  type='text' placeholder='last name'>   
        <input class='itwo'  type='tel' placeholder='phone number'>
      </div>
      <button type="button" onclick="next()">NEXT</button>
   </div>
   <div id='wrap2' class='hide'>
      <div class='dtwo'>
        <input class='itwo'  type='email' placeholder='email'>
        <input class='itwo'  type='password' placeholder='password'>
        <input class='itwo'  type='password' placeholder='confirm password'>
      </div>
      <button type="button" onclick="back()">BACK</button>
   </div>
    
</form>

Answer 1

我可能遗漏了一些重要的东西，但看起来您可以保持布局不变，只需隐藏一种形式并显示另一种形式，具体取决于 @media screen and (max-width: XXXpx) 其中 XXX 是您希望断点所在的位置。

假设您决定使用 600 像素的宽度：

form#two{
   display:none //hide form two 
}
@media screen and (max-width: 600px){
   form#two{
      display:flex; //show form two on screen sizes with width <=600px
      //I'm setting display as flex, since that is what
      //you have it to show as in your example
   }
   form#one{
      display:none; //hide form one
   }
}

如果您想简化布局，但又不介意更改几乎所有其他内容，您可以尝试在该表单中隐藏和仅显示您需要的内容。

您可以如何做到这一点的一个示例如下：

var group1 = document.getElementsByClassName("group-1");
  var group2 = document.getElementsByClassName("group-2");
  function next(){
    for (var i = 0; i < group1.length; i++) {
      group1[i].classList.add('sm-hide');
    }
    for (var i = 0; i < group2.length; i++) {
      group2[i].classList.remove('sm-hide');
    }
  }
  function back(){
    for (var i = 0; i < group1.length; i++) {
      group1[i].classList.remove('sm-hide');
    }
    for (var i = 0; i < group2.length; i++) {
      group2[i].classList.add('sm-hide');
    }
  }

    form{
      display: flex;
      flex-wrap: wrap;
    }
    form > div{
      width:50%;
      background:#333;
    }
    .btn-back,.btn-next{
      display: none;
    }
    @media screen and (max-width: 600px){
      form > div{
        width:100%;
      }
      .btn-back,.btn-next{
        display: block;
      }
      .sm-hide{
        display: none;
      }
    }

  <form id="form">
    <div class="input group-1"><input type="text"></div>
    <div class="input group-1"><input type="text"></div>
    <div class="input group-1"><input type="text"></div>
    <button type="button" class="btn-next group-1" onclick="next()">Next</button>
    <div class="input sm-hide group-2"><input type="text"></div>
    <div class="input sm-hide group-2"><input type="text"></div>
    <div class="input sm-hide group-2"><input type="text"></div>
    <button type="button" class="btn-back sm-hide group-2" onclick="back()">Back</button>
  </form>

当然，您可以根据需要添加任意多的样式，这只是一个简单的布局建议，但同样，您可以通过多种方式解决此问题

如何构造 html 以利用媒体查询

how to structure html to take advantage of media queries

html

javascript

css

media-queries

responsive