的JavaScript生成的元素總是重疊在移動

我試圖建立一個測驗下面這個教程：https://www.sitepoint.com/simple-javascript-quiz/ 我沒有碰到太多的邏輯，並添加引導集成（+中繼檢視區標記）。僅供參考，我嘗試了沒有這些改變，我的問題仍然存在。的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>

它工作正常，在桌面上，但沒有這麼多的手機：https://i.imgur.com/buu2PBJ.png 的答案，問題是重疊使得測驗無法使用，特別是因爲我在提交給他們的無線電元素的加入很好的答案，產生更多的重疊。我嘗試使用「vh」單位，我嘗試使用邊距/填充來玩，但無論我做什麼，它總是看起來像移動設備上的樣子。實際上，更改按鈕區域周圍的邊距或填充將對桌面視圖產生影響，但在移動設備上則無效。元素總是以相同的方式重疊。

我相當確定這是移動頁面結構中的一些邏輯，我不明白，但儘管進行了許多研究和嘗試，但我確實無法把它放在手邊。

你有什麼想法嗎？

來源

2017-09-02 DannyBiker

首先，使用百分比和VW用於測量的單元。其次，使用箱大小的CSS屬性並將其設置爲邊界框。而最後，瞭解更多關於@media here和here。這段代碼是非常重要的：

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

來源

2017-09-02 16:19:05

的JavaScript生成的元素總是重疊在移動

回答

相關問題