如何构造html以利用媒体查询[关闭]

Posted 2023-03-06

【中文标题】如何构造html以利用媒体查询[关闭]

【英文标题】：how to structure html to take advantage of media queries [closed]

【发布时间】：2021-08-29 08:41:48

【问题描述】：

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

我可以通过创建两组不同的 html 来做到这一点（请参阅 sn-p），但想看看是否有一种方法可以使用一组 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>

【问题讨论】：

我完全不知道为什么这个问题被关闭或为什么它被否决。请重新打开。这当然不是基于意见的

【参考方案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 的目的。

同意，但讨论做某事的“最佳方式”远远超出了这个社区的范围。我可能会使用网格布局并更改元素的列，但这只是一个偏好，而根据您的代码，这是最简单的解决方案。

我不是在讨论最好的方法。我只是不想拥有两组 html 代码，因为可能有办法用一组来完成

您可以通过多种方式做到这一点。您可以让输入在大屏幕上 2 x 2 显示，并隐藏下一个/后退按钮，并让它们在小屏幕上 1 x 1 显示，显示下一个/后退并让下一个/后退添加一个仅基于隐藏/取消隐藏的类响应式类。

怎么样？你怎么能做到这一点，最好用 flex