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进行更改以相应地进行匹配。我主要关心移动设备，平板电脑，笔记本电脑的屏幕和台式机等

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

0 个答案: