Question

关于这个的很多问题但是...当我使用这个css代码时。它可以在设备上运行，而不是在我调整浏览器大小时...但如果我将我的CSS更改为＆＃34; min-width＆＃34;而不是＆＃34; min-device-width＆＃34;根本不起作用......既不在我的浏览器也不在我的手机设备上......有什么想法吗？感谢

@media only screen and (min-device-width: 768px) and (max-device-width:1000px) {
.footericons {margin-left: 37%;}
.logo img {margin-top:-15px; width: 120px;margin-left:-55px;}
.welcome {margin-top:-20px;}

}

Answer 1

这应该有效。如果没有，请告诉我们剩下的CSS或SCSS。

@media only screen and (min-width: 768px) and (max-width: 1000px) {
    .footericons {
        margin-left: 37%;
    }
    .logo img {
        margin-top:-15px; 
        width: 120px;
        margin-left:-55px;
    }
    .welcome {
        margin-top:-20px;
    }
}

Answer 2

不需要仅仅使用＆＃34; @media screen＆＃34;，也只需使用min-width和max-width ......

@media screen and(min-width: 768px) and (max-width:1000px)

Answer 3

使用 min-device-width 和 max-device-width 时，请不要调整浏览器窗口大小，而是调整浏览器开发者工具。

对于Chrome，设备工具栏，快捷键 Ctrl + Shift + M
对于Firefox，它是自适应设计模式，快捷键 Ctrl + Shift + M

更改您的查询以使用 min-width ＆amp; max-width 然后它将与浏览器调整大小以及开发人员工具（设备工具栏，响应式设计模式）一起使用。

您可以查看本教程 - CSS Media Queries教程，了解如何创建自适应网站设计。

css媒体查询不适用于浏览大小调整

3 个答案: