Html @当“最大宽度”较小时，介质不改变任何内容？

我正在尝试制作一个响应性标题，该标题可以更改多个不同大小设备的字体大小，但是当使用@Media屏幕和（max width:X px）时，它不会进行我应用于它的任何更改。 我的代码

@媒体屏幕和（最大宽度：690px）
{
.集装箱
{
宽度：100%；
}
#标题
{
宽度：100%；
右：0%；
}
#收割台h1
{
显示：无；
}
#导航a
{
浮动：无；
显示：块；
文本对齐：居中；
}
#导航权
{
浮动：无；
}
#导航：以前
{
显示：块；
位置：绝对位置；
顶部：10px；
右：0%；
线高：40px；
字号：21px；
光标：指针；
}
#导航：之后
{
位置：绝对位置；
右：0；
顶部：-15px；
高度：60px；
}
}
@媒体屏幕和屏幕（最大宽度：509px）
{
#导航
{
字体大小：16px；
}
}
@媒体屏幕和屏幕（最大宽度：409px）
{
#导航
{
字号：8px；
}
}

它需要知道一个从何处开始，另一个从何处结束-这是由一个像素完成的，为了平滑响应布局，我通常发现从低尺寸开始工作更容易，因为低尺寸从零像素宽开始，因此无需提及最小宽度

我将重新排列您的媒体查询，从窄屏幕到宽屏幕：

@媒体屏幕和（最大宽度：409px）
{
#导航
{
字号：8px；
}
}
/*现在，我将在上面加一个最小宽度，这样它就知道它的范围不会从零开始，也不会与前面的媒体查询冲突*/
/*请注意，这比之前的最大宽度大1倍*/
@介质屏幕和（最小宽度：410px）和（最大宽度：509px）
{
#导航
{
字体大小：16px；
}
}
/*现在我要在上面加一个最小宽度，这样它就知道它的范围不是从零开始的，也不会与前面的媒体查询冲突*/
/*请注意，这比之前的最大宽度大1倍*/
@介质屏幕和（最小宽度：510px）和（最大宽度：690px）
{
.集装箱
{
宽度：100%；
}
#标题
{
宽度：100%；
右：0%；
}
#收割台h1
{
显示：无；
}
#导航a
{
浮动：无；
显示：块；
文本对齐：居中；
}
#导航权
{
浮动：无；
}
#导航：以前
{
显示：块；
位置：绝对位置；
顶部：10px；
右：0%；
线高：40px；
字号：21px；
光标：指针；
}
#导航：之后
{
位置：绝对位置；
右：0；
顶部：-15px；
高度：60px；
}
}
/*现在就有了它*/

您在html文件中添加了视口了吗？如果不是，则在头部添加视口 标签

---

这里有一个解决方案，可以在屏幕大小更改时应用媒体查询。 我编写了一个代码示例，只是为了解释针对不同屏幕大小应用媒体查询的格式：

正文{
保证金：0自动；
最大宽度：100%；
宽度：100%；
}
.footer_类{
位置：固定；
底部：0；
背景:#DFEC；
宽度：100%；
文本对齐：居中；
}
.U类标题{
位置：固定；
排名：0；
背景:#DFEC；
宽度：100%；
文本对齐：居中；
}
/*------iPhone 5、5S、5C和5SE------*/
/*肖像与风景*/
@仅媒体屏幕
和（最小设备宽度：320px）
和（最大设备宽度：568px）{
.头衔{
字体大小：14px；
}
}
/*------iPhone 6、6S、7和8------*/
/*肖像与风景*/
@仅媒体屏幕
和（最小设备宽度：375px）
和（最大设备宽度：667px）{
.头衔{
字体大小：20px；
}
}

---

在我正确添加了媒体查询后，这就成功了，谢谢！很高兴能帮助@Billystutaria
<meta name="viewport" content="width=device-width, initial-scale=1.0">