在几门课程和小型网站之后,我尝试创建我的第一个更大的页面。当我在 PC 上查看它时,要么将 chrome 页面调整为最小宽度,它看起来不错,但是当我在移动设备上打开它时,它看起来很奇怪,或者元素太小。我使用引导程序作为框架。你能帮助我吗?谢谢!
这里是网络的完整代码:https://codepen.io/dominik-smolinsk-/pen/yLgPNmo
<div class="quiz hide container-fluid">
<div>Score:<span class="score">0</span>/6</div>
<h1 class="text-center quest">Question?</h1>
<div class="container">
<div class="row text-center" style="font-size: 1.2em;">
<div class="col-lg-6 b bt1 p-1 m-1">
<p class="an1">Answer1</p>
</div>
<div class="col-lg-6 b bt2 p-1 m-1">
<p class="an2">Answer2</p>
</div>
<div class="col-lg-6 b bt3 p-1 m-1">
<p class="an3">Answer3</p>
</div>
<div class="col-lg-6 b bt4 p-1 m-1">
<p class="an4">Answer4</p>
</div>
</div>
<button type="button" class="btn btn-secondary nextQ hide">Next Question</button>
</div>
</div>
答案 0 :(得分:1)
您忘记在 head 部分添加此元标记
<meta name="viewport" content="width=device-width, initial-scale=1">