使HTML表单响应

Question

我无法使这个HTML表单响应。它在台式机上看起来不错，但在手机和平板电脑上就不行了。下面是代码的链接:

JSFiddle

我试过去除身体的overflow: hidden和white-space: nowrap;，并使用不同类型的冷，但它不起作用。我认为我的stack类和padding在一些地方造成的问题，但我无法解决它。

Answer 1

看起来你只是用HTML制作表单。也许尝试使用引导形式https://getbootstrap.com/docs/4.0/components/forms/。这将更容易使表单响应。

Answer 2

CSS媒体查询是响应式网页设计的基础。试试这样写:

div {
height: 200px;
width: 400px;
outline: 1px solid black;
}

@media screen and (max-width: 767px) {
div {
width: 100px;
}
}

<div>
Hello World
</div>