css 媒体不适用于浏览器尺寸，但适用于缩放或响应式设计视图

Question

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

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;
}

}

Answer 1

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

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

Answer 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/

Answer 3

试试这个代码。希望，它会对你有用。

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;
    }

}

css 媒体不适用于浏览器尺寸，但适用于缩放或响应式设计视图

css media not working on browser size but working on zoom or Responsive Design View

html

css

media-queries