Question

我有一个奇怪的问题。当我调整浏览器的窗口大小但是它正在进行缩放时，我的媒体查询无法正常工作。它也适用于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媒体不支持浏览器大小，但处理缩放或响应式设计视图

3 个答案: