Html 媒体查询根本不起作用

我绝望了。我正试图建立一个网站，使其移动友好和响应，然而，我似乎无法得到任何类型的媒体查询工作在所有！我所有的大小、宽度和高度都用“%/em”表示，字体大小用“vw/em”表示。我遇到的最大问题是，随着屏幕的缩小，我的文本也会缩小，以至于眼睛都快看不清了！我不认为发送任何代码是相关的，但如果需要，我会发送我的一些代码（我的网站仍处于脱机状态，如果这个问题没有解决，我无法将其发布）

以下是我尝试过的：

我试着把这个放在我的标签上：

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

我也尝试过其他媒体查询，但绝对没有任何变化！我做错什么了吗？也许吧，但是什么？！！这导致了很多问题！我不能根据不同的屏幕大小改变我的标题，我不能改变我的显示，我的标题链接乱七八糟，等等

另外，请注意，我是一个初学者，我不使用任何javascript、bootstrap或任何东西

---

提前感谢您的帮助

通常，最好使用基于最小屏幕宽度的媒体查询。以下是您发布的代码的工作示例：

代码笔：

---

你的问题有点奇怪。也许有了一些逻辑约束，你就能实现你想要的？这就是我的意思：

@media (max-width: 400px) {
    body{
        background-color: yellow;
    }
}

@media (min-width: 401px) and (max-width: 800px){
    body { 
        background-color: blue;  
    }
}

@media (min-width: 801px) and (max-width: 1100px) {
    body { 
        background-color: purple;
    }
}

@media (min-width: 1101px){
    body{
        background-color: orange;
    }
}

以我的拙见，使用

min width

和

max width

设置间隔有助于我更好地可视化正在发生的事情。这将显示更改宽度时颜色的变化。这没有多大好处，但它是开始媒体查询的一部分

编辑：

---

钢笔包含颜色之间的过渡，因为很酷

这很奇怪，我以前也尝试过你提出的方法，但当时不起作用……现在它起作用了。这可能是因为我在媒体查询中添加了“屏幕…”。。。？不管怎样，谢谢你，它现在真的很神奇！我仍然有很多问题要解决，但我想我会问另一个问题=D！非常感谢。也许你有语法问题，谁知道。。。添加屏幕不应该改变任何东西，以至于所有东西都停止工作。尽管如此，它还是没有意义。我发现，当我尝试将媒体查询脚本放在我的head标签中而不是css样式表中时，它起了作用……我想这可能是我的错误。哦，我刚才理解了你所说的“最小宽度”是什么意思！我以前试过，但我想我的语法错了。非常感谢。另一个答案更为精确，因为我喜欢有一个实际的代码示例，但感谢您的帮助。=）

@media (max-width: 400px) {
    p { font-size: 60%;}
}

@media (min-width: 400px) {
    p { 
        font-size: 80%;
        background-color: blue;  
    }

}

@media (min-width: 800px) {
    p { font-size: 120%;}
}

@media (max-width: 400px) {
    body{
        background-color: yellow;
    }
}

@media (min-width: 401px) and (max-width: 800px){
    body { 
        background-color: blue;  
    }
}

@media (min-width: 801px) and (max-width: 1100px) {
    body { 
        background-color: purple;
    }
}

@media (min-width: 1101px){
    body{
        background-color: orange;
    }
}