2017-09-02 6 views
1

私はこのチュートリアルの後でクイズを作成しようとしています: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 の回答や質問は、私は彼らのラジオ要素に提出するには良い答えを追加している、特に以来、クイズが使用できなくなり、重複していますより重複して生成されます。

私はCSSでモバイルで別の最小高さを設定しようとしましたが、 "vh"単位を使って試しましたが、マージン/パディングで再生しようとしましたが、私は何をしても常にモバイルで見えます。実際には、ボタンの周りの余白やパディングを変更すると、デスクトップビューには影響がありますが、モバイルには影響しません。要素は常に同じ方法でオーバーラップします。

私は、モバイル上のページの構造上、私が理解していないロジックがあると確信していますが、多くの研究や試行にもかかわらず、私は本当にそれに指をかけられません。

ご存知ですか?

答えて

0

まず、測定単位としてパーセントとvwを使用します。 第2に、cssでbox-sizingプロパティを使用し、border-boxに設定します。 最後に、@media herehereの詳細を読んでください。このコードは非常に重要です。

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
関連する問題