Javascript 生成的元素在移动设备上总是重叠

Question

我正在尝试按照本教程构建一个测验:https://www.sitepoint.com/simple-javascript-quiz/我没有太多涉及逻辑并添加了 Bootstrap 集成(+元视口(viewport)标签)。仅供引用，我在没有进行这些更改的情况下尝试过，但我的问题仍然存在。

该测验非常简单，但我很难使其在移动设备上运行。问题是我不确定问题的真正根源，因此我很难准确地描述它。

在该教程中，问题及其答案是由 javascript 生成的，而它们下面的导航/提交按钮不是由 JavaScript 生成的，这意味着我必须为生成问题/答案的容器设置最小高度。如果没有这个，按钮将在 js 生成的代码之前显示，并且按钮将显示在问题/答案容器的顶部。非常符合逻辑:

<div class="quiz-container">
    <div id="quiz">JS generated Questions and Anwsers go here</div>
</div>            
<button id="previous">&lt;&lt;</button>                                     
<button id="next">&gt;&gt;</button>                                    
<button id="submit">Submit</button>
<button id="reset">Reset</button>   
<span id="results"></span>                                                                              

它在桌面上运行良好，但在移动设备上效果不佳:/image/Lxz7p.png答案和问题重叠，导致测验无法使用，特别是因为我在提交时将好的答案添加到其单选元素中，从而产生了更多重叠。

我尝试在 CSS 中在移动设备上设置另一个最小高度，我尝试使用“vh”单位，我尝试使用边距/填充，但无论我做什么，它总是看起来像移动设备上的那样。实际上，更改按钮区域周围的边距或填充将对桌面 View 产生影响，但对移动设备没有影响。元素总是以相同的方式重叠。

我相当确定这是我不理解的移动页面结构中的一些逻辑，但尽管我进行了很多研究和尝试，但我确实无法确定它。

你有什么想法吗？

Answer 1

首先，使用百分比和vw作为测量单位。其次，使用css中的box-sizing属性并将其设置为border-box。最后，请阅读有关 @media here 的更多信息。和 here 。这段代码非常重要:

<meta name="viewport" content="width=device-width, initial-scale=1.0">