html - @media 函数在此 CSS 代码中不起作用

Question

我一直在尝试使@media 与此网页一起使用，但一直无法这样做。我插入了以下 CSS 和 HTML 代码。我错过了什么？当我尝试调整页面大小时，相应像素的新样式不会生效。但是， min-width: 1281px 样式确实有效。它下面的那些不起作用

尝试了多种不同的浏览器，并在网上进行了研究。似乎代码是正确的，不知道我错过了什么。

@media (min-width: 1281px){
{CSS STYLES-1}
    }
@media (min-width: 1025px) and (max-width: 1280px){
{CSS STYLES-2}
    }
@media (min-width: 768px) and (max-width: 1024px) {
{CSS STYLES-3}
    }
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
{CSS STYLES-4}
    }
@media (min-width: 481px) and (max-width: 767px) {
{CSS STYLES-5}
    }
@media (min-width: 320px) and (max-width: 480px) {
{CSS STYLES-6}
    }

     <meta charset="utf-8" content="width=device-width, initial-scale=1" name="viewport">
{HTML CODE}

当窗口大小减小时，我希望 CSS 样式 e 相应地更改以匹配。我主要关注移动设备、平板电脑、笔记本电脑屏幕和台式机等

标签： htmlcss