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

【问题标题】：Arranging divs with the same id in desktop and mobile在桌面和移动设备中排列具有相同 id 的 div
【发布时间】：2018-02-17 15:40:33
【问题描述】：

我有一个网页，我正在尝试针对桌面和移动设备进行优化，但对于如何将 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 的单独输入

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

【问题讨论】：

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

标签： javascript html css

【解决方案1】：

无论屏幕类型如何，最好使用相同的 HTML。我会使用 div 标签，而不是滥用图例标签。这简化了 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）作为示例或解决方案，了解如何为不同尺寸的屏幕设置不同的样式。

【讨论】：

【解决方案2】：

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

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

【讨论】：