css 媒体不适用于浏览器大小，但适用于缩放或响应式设计视图答案

【问题标题】：css media not working on browser size but working on zoom or Responsive Design Viewcss 媒体不适用于浏览器大小，但适用于缩放或响应式设计视图
【发布时间】：2016-10-27 21:17:42
【问题描述】：

我有一个奇怪的问题。当我调整浏览器的窗口大小但它正在缩放时，我的媒体查询不起作用。它也适用于 Firefox 的响应式设计视图。这是我的 ccs 媒体查询：

https://jsfiddle.net/5n9kv2g5/1/

html:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv=X-UA-Compatible content="IE=edge">

<title></title>
<meta name="description" content="">
<meta name="author" content="">

<link rel="stylesheet" href="css/style.css">


<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

<body>
<div class="row">
    <div class="col-1">

    </div>
    <div class="col-2">

    </div>
</div>
</body>
</html>

css:

body{
  margin:auto;
}
a{
    text-decoration: none;
}
.box{
position:absolute;
top:7rem;
height: 27rem;
}
.col-1{
width: 60%;
float:left;
position: relative;
background: #262626;
height: 40rem;
min-height: 100vh;
}
.col-2{
width: 40%;
float: left;
background: #303030;
position: relative;
height: 40rem;
min-height: 100vh;
}


/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 479px) {
/* Styles */

.col-1{
    display: none;
}
.col-2{
    background:#303030 url("../images/logo.png") top center no-repeat;
    -webkit-background-size:50%;
    background-size:30%;
    width: 100%;
    height: 32rem;
}

}
@media only screen and (min-device-width : 480px) and (max-device-width : 639px) {
/* Styles */

.col-1{
    display: none;
}
.col-2{
    background:#303030 url("../images/logo.png") top center no-repeat;
    -webkit-background-size:50%;
    background-size:30%;
    width: 100%;
    height: 34rem;
}
}
@media only screen and (min-device-width : 640px) and (max-device-width : 767px) {
/* Styles */

.col-1{
    display: none;
}
.col-2{
    background:#303030 url("../images/logo.png") top center no-repeat;
    -webkit-background-size:50%;
    background-size:30%;
    width: 100%;
    height: 35rem;
}

}

@media only screen and (min-device-width : 768px) and (max-device-width : 1023px) {
.col-1{
    width: 100%;
    height: 33rem;
    min-height: 0;
}

.box{
    top:8rem;
    height: 25rem;
}

.col-2{
    width: 100%;
    height: 30rem;
}

}

【问题讨论】：

标签： html css media-queries

【解决方案1】：

试试这个代码。希望，它会为你工作。

HTML

<body class="preload" ng-app="loginApp" ng-cloak>
    <div class="row">
        <div class="col-1">

        </div>
        <div class="col-2">

        </div>
    </div>
</body>

CSS

body{
  margin:auto;
}
a{
    text-decoration: none;
}
.box{
    position:absolute;
    top:7rem;
    height: 27rem;
}
.col-1{
    width: 60%;
    float:left;
    position: relative;
    background: #262626;
    height: 40rem;
    min-height: 100vh;
}
.col-2{
    width: 40%;
    float: left;
    background: #303030;
    position: relative;
    height: 40rem;
    min-height: 100vh;
}


/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-width : 320px) and (max-width : 479px) {
    /* Styles */

    .col-1{
        display: none;
    }
    .col-2{
        background:#303030 url("../images/logo.png") top center no-repeat;
        -webkit-background-size:50%;
        background-size:30%;
        width: 100%;
        height: 32rem;
    }

}
@media only screen and (min-width : 480px) and (max-width : 639px) {
    /* Styles */

    .col-1{
        display: none;
    }
    .col-2{
        background:#303030 url("../images/logo.png") top center no-repeat;
        -webkit-background-size:50%;
        background-size:30%;
        width: 100%;
        height: 34rem;
    }
}
@media only screen and (min-width : 640px) and (max-width : 767px) {
    /* Styles */

    .col-1{
        display: none;
    }
    .col-2{
        background:#303030 url("../images/logo.png") top center no-repeat;
        -webkit-background-size:50%;
        background-size:30%;
        width: 100%;
        height: 35rem;
    }

}

@media only screen and (min-width : 768px) and (max-width : 1023px) {
    .col-1{
        width: 100%;
        height: 33rem;
        min-height: 0;
    }

    .box{
        top:8rem;
        height: 25rem;
    }

    .col-2{
        width: 100%;
        height: 30rem;
    }

}

【讨论】：

【解决方案2】：

编辑/新答案：

使用这个

@media only screen and (min-width : 320px) and (max-width : 479px)

而不是这个

@media only screen and (min-device-width : 320px) and (max-device-width : 479px)

（所有其他部分都相同 - min-width 而不是 min-device-width 等）

https://jsfiddle.net/1wbjp0pp/

【讨论】：

谢谢，但没有解决我的问题！当我更改窗口大小时它再次不起作用
jsfiddle.net/5n9kv2g5 你可以在这里看到它。如果你调整结果视图的大小，什么都不会发生，但如果你放大它会起作用
请注意我完全改变的答案

【解决方案3】：

如果这不起作用，我怀疑你没有添加视口元标记

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

【讨论】：