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

Question

很多关于这个的问题但是..当我使用这个css代码时。它适用于设备，而不是当我调整浏览器大小时。但是如果我将我的 css 更改为 "min-width" 而不是 "min-device-width" 根本不起作用......既不在我的浏览器也不在我的 phone 设备..有什么想法吗？谢谢

@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

不需要只放“@media screen”，也只需使用最小宽度和最大宽度...

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

Answer 3

当使用 min-device-width 和 max-device-width 时，您不是通过调整浏览器大小来检查 window 而是您的浏览器开发者工具。

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

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

您可以查看此教程 - CSS Media Queries 创建响应式网站设计的教程。

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

css media querie do not work on browse resizing

css

media-queries

responsive-design

responsive