当我想让我的页面响应时，为什么 html 视口元标记会破坏我的 CSS？

Question

我正在为 uni 开发一个小型网站，并首先从设计移动网站开始。 它看起来正是我希望它在 320px 移动设备上的样子。 我开始使用媒体查询并意识到它们不起作用，因为我忘记在文档的头部输入视口元标记。 我把它放在文档的头部，它破坏了我的整个设计。

以前有没有人发生过这种情况？ 也许我的代码某处有错误。 我花了很长时间做这个，因为我是编码新手。 提前感谢任何回应的人。

以下是不带元标记的网站链接。 这些图像是它的外观。

网站

Answer 1

我认为您应该在 html 代码中添加这些代码行

<head>
   <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
</head>

Answer 2

试试加这个，

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

更多细节极客极客

当我想让我的页面响应时，为什么 html 视口元标记会破坏我的 CSS？

问题描述

1 个解决方案

解决方案1
-1 2022-01-17 20:12:00

解决方案2
-1 2022-01-17 20:21:56

当我想让我的页面响应时，为什么 html 视口元标记会破坏我的 CSS？

问题描述

1 个解决方案

解决方案1 -1 2022-01-17 20:12:00

解决方案2 -1 2022-01-17 20:21:56

解决方案1
-1 2022-01-17 20:12:00

解决方案2
-1 2022-01-17 20:21:56