javascript - 在桌面和移动设备中排列具有相同 id 的 div

Question

我有一个网页，我正在尝试针对桌面和移动设备进行优化，但对于如何将 div 放置在屏幕上引用相同 id 的不同位置的经验很少。关于最佳实践的任何建议都将非常有帮助。

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

例如，上面我有一个名为 feature-filter 的输入，在桌面上应该位于名为 header 的菜单栏中。请注意，feature-filter 没有随附的 CSS。

#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>

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

#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>

是否可以在 javascript 中引用相同的 DOM id 并将 feature-filter 放在 html 的两个不同位置 - 一个用于移动版和桌面版？

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

中有两个具有相同 id 的单独输入

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

Answer 1

无论屏幕类型如何，最好都使用相同的 HTML。我会使用 div 标签，而不是滥用 legend 标签。这简化了 JavaScript 并提高了可访问性。但是，您可以根据屏幕尺寸设置不同的样式。您甚至可以禁用/启用某些元素以适应移动设备。

我不会尝试使用具有相同 ID 的两个不同 HTML 元素。重复的元素应该使用类名而不是 ID(旨在唯一)。要么使用相同的 HTML 和不同的样式，要么使用两个完全不同的 HTML 元素(具有不同的 ID)并使用 CSS 禁用一个并在 JavaScript 中测试应该使用哪个。

要针对不同的设备采用不同的样式，推荐的做法是使用根据屏幕尺寸应用不同规则的样式表。看这个StackOverflow question for how to target different sized screens with your CSS style sheet .

您还可以引用现有的样式框架，例如 Bootstrap's responsive grid作为示例或解决方案，了解如何针对不同尺寸的屏幕设置不同的样式。