时间戳

首页 > 解决方案 > 如何构建 html 以利用媒体查询

javascript - 如何构建 html 以利用媒体查询

问题描述

我正在尝试设计一个可在台式机和手机上使用的注册页面。要注册，我需要 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>

标签： javascripthtmlcssmedia-queriesresponsive

解决方案

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

假设您决定选择 600px 的宽度：

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>

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

推荐阅读