html - 将简单的 html 表单更改为与移动设备兼容

Question

我有一个非常简单的 html 表单（带有一些文本和选择字段的图像），我想将其更改为也可用于移动设备。

完成此任务的最简单解决方案是什么？

我在网上找到了很多解释，但对于我的需求来说，它们都太复杂了......基本上我只想根据设备调整表格的宽度，仅此而已:)

对解释如何对移动设备进行最基本调整的简单教程有任何参考吗？

Answer 1

您可以使用CSS3 媒体查询来构建响应式布局。

例如：

  @media (max-width: 767px) {
        .yourFormClass {
            /* Some rules */
        }
  }

  @media (min-width: 768px) and (max-width: 979px) {
        .yourFormClass {
            /* Some rules */
        }
  }

  /* other resolutions... */

我建议你阅读这些文章：

1. 如何使用 CSS3 媒体查询来创建您网站的移动版本；
2. Mozilla Dev 的 CSS 媒体查询。