自动调整手机和其他屏幕尺寸的页面大小

Question

我在w3学校学习了css，我刚刚创建了一个页面，它可以像我想要的那样工作，但是如果我使用检查元素/在电话/其他设备屏幕较小的情况下，它是不规则的，特别是在文本中，我不会我知道我错过了哪里，这是我的代码：

select * from p001

谁知道我错过了哪里？ -EDIT-修正了一些词

Answer 1

还有很多工作要做......首先，你需要将它放在head标签中：

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

确保移动设备不会让您的桌面网站变小（即无法缩放时无法读取）。

接下来，您需要＆＃34;媒体查询＆＃34;在您的CSS中，例如：

@media only screen and (max-width: 960px) {
  ...
  [ put CSS rules for screens below 960px width in here ]
  ...
}

您可以使用多种媒体查询，包括平板电脑，不同尺寸的智能手机等。

这是必不可少的部分 - 它做了很多工作......

Answer 2

解决整个代码太冗长了。我建议在你的代码中使用bootstrap。对于初学者来说，这是学习响应式设计的最简单方法。 请参阅此链接Bootstrap Getting started page