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类仍然需要在id

中使用相同html的两个单独输入

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

Answer 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作为示例或解决方案，以了解如何针对不同大小的屏幕进行不同的样式设计。

Answer 2

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

或者下载Bootstrap并根据您的CSS喜好自定义它。

在桌面和移动版

2 个答案: