Javascript 在桌面和移动设备中排列id相同的div

我有一个网页，我正在尝试为桌面和移动设备进行优化，但对于如何在屏幕上引用相同

id

的不同位置放置div几乎没有经验。任何关于最佳实践的建议都会非常有用

<input id='feature-filter' type='text' placeholder='Filter by name' />

但是，在移动版本中，我想将此输入放在页面底部的图例中。在我的javascript中，有一个事件监听器，它从

功能过滤器

提取数据

#header {
 display: flex;
position: absolute;
align-items: center;
top: 0px;
width: 100%;
line-height: 50px;
height: 50px;
background: rgba(12, 12, 12, 0.8);
color: #eee;
font: 16px/20px 'Open Sans', sans-serif;
font-weight: 500;
text-align: center;
vertical-align: middle;
}


<div id='header'>
<button title = "ButtonA" id = "A"></button>
<button title = "ButtonB" id = "B"></button>
<button title = "ButtonC" id = "C"></button>
<input id='feature-filter' type='text' placeholder='Filter by name' />
</div>

#legend { z-index: 101010; padding: 5px; position: fixed; text-align: center;
  color: #fff; bottom: 0px; width: 300px; background: #181818; opacity: 0.92;
  font-family: 'Open Sans', sans-serif; left: 0; right: 0; font-weight: 300}

<div id='legend'>
 <input id='feature-filter' type='text' placeholder='Filter by name' />
</div>

#图例{z-index:101010；填充：5px；位置：固定；文本对齐：中心；
颜色：fff；底部：0px；宽度：300px；背景：181818；不透明度：0.92；
字体系列：“开放式SAN”，无衬线；左：0；右：0；字体重量：300}

是否可以在javascript中引用相同的DOM

id

，并在

html

中的两个单独位置放置

功能过滤器

——一个用于移动设备，另一个用于桌面版本

解决这个问题的最佳方法是什么？使用CSS类仍然需要在

html

---

任何基本的解释或建议都将不胜感激。

我建议根据可用像素的数量使用CSS来正确定位每个元素。如果手机比做这个，如果桌面比做这个。这是视觉上的问题，对吗？为什么不使用CSS并告诉它您希望页面的外观呢

---

或者下载Bootstrap并根据您的CSS喜好对其进行自定义

无论屏幕类型如何，最好使用相同的HTML。我将使用div标记，而不是误用legend标记。这简化了JavaScript并提高了可访问性。但是，您可能会根据屏幕大小对其进行不同的样式设置。您甚至可以禁用/启用某些元素以适应移动环境

我不会尝试使用两个具有相同ID的不同HTML元素。重复的元素应该使用类名，而不是ID（其目的是唯一的）。或者以不同的方式使用相同的HTML和样式，或者使用两个完全不同的HTML元素（具有不同的ID），并使用CSS禁用其中一个元素，然后在JavaScript中测试应该使用哪个元素

要对不同的设备采用不同的样式，建议使用基于屏幕大小应用不同规则的样式表。看这个

---

您还可以参考现有的样式框架（例如示例或解决方案），了解如何为不同大小的屏幕设置不同的样式。

在html中，不能对两个不同的元素使用相同的id，id被设计为具有最高css选择器值的唯一标识符。我会使用@media为手机和桌面创建不同的规则集。如果对两个元素使用id；如果它没有自动抛出一个错误，那么停止函数将在您的程序或本例中的网页中引入意外行为。这里是一个链接