如何使标题仅响应？

Question

有一个旧网站未针对小屏幕进行优化（PHP + HTML/CSS/JS）。

头部缺少 标签，因此页面内容是通过调整屏幕尺寸来显示的 - 结果很小。该网站还远未完全适应移动设备，但希望至少使标题自适应。

也就是说，假设在移动设备上打开时，标题看起来像一个带有徽标和此类情况下常用的“汉堡包”图标的矩形。按汉堡包图标，我们会看到一个带有菜单项的模式窗口。

我的知识还不够。

我是否正确理解，如果没有标签，媒体查询和容器查询将不起作用？

如果我在head部分指定标签，结果发现现在所有页面都需要适配。

如果我不指定 ，则不会应用媒体查询中的语句。

我现在如何才能只使标题自适应？

Answer 1

我希望我正确理解了你的问题。 您将制作一个响应式菜单。 当网站在手机上显示时，菜单应该是汉堡包的形式。 确切地说，您应该使用

media query

。

@media only screen and (max-width: 600px) {
   body {
     background-color: light blue;
   }
}

请注意此代码。 使用

max-width

。 这意味着如果你的页面宽度小于600px，主体颜色将会改变。 可以赋予他另一个值：

min-width

也就是说，如果它大于一个数字，就会发生一个动作。 我感觉你也明白了，好像和条件环的作用是一样的。

您可以拥有自己的主菜单。 并创建您自己的汉堡菜单。 只是

display: none.

并使用

media-query

表示如果该值小于某个限制，则

display: block

。 并向任何人显示您的主菜单。

这意味着您已经创建了两者，但是您指定了它们的显示条件。 您可以根据网站的用户以及他们最常访问的设备类型来定义

max-width

数字。 您还可以从：

w3school.com

寻求帮助

抱歉冗长的解释，我试图为您解释清楚。