Question

这是有争议的css媒体查询....我在检查页面和使用Chrome的响应选择时处理媒体查询。当我打开检查器时，一切看起来都很好，但是当我关闭检查器并将页面调整到低于480px的值时，它不会保留以前工作的任何媒体查询。有关为什么会发生这种情况的任何建议？

我尝试查看页面源并手动刷新css文件。

HTML Head然后是CSS

<head>
    <title>company name here</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville" 
    rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?
    family=Josefin+Sans|Libre+Baskerville" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?
    family=Cinzel|Josefin+Sans|Libre+Baskerville" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?
    family=Cinzel|Josefin+Sans|Libre+Baskerville|Yellowtail" 
    rel="stylesheet">
    <link rel="stylesheet" href="css/home.css">
    <script 
   src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>      

@media only screen and (max-device-width: 480px) 
{
.logoContainer
{
   height: 50px;
   width: 30%;
   font-size: 1em;

}   

#headerBoxRight
{
    margin-right: 5%;
}

#bannerPictures
{
    width: 100%;
}

.wantItGone
{
    width: 50%;
    font-size: 2.1em;
    float: left;
    margin-left: -30px;
}

.gotYouCovered
{
    width: 40%;
    margin-left: -160px;
}

.aboutSection
{
    height: 250px;
}
.carboneauPicture
{
    width: 38%;
    height: 160px;
    margin-left: 10px;
    margin-top: 40px;
}

.aboutUs
{
     height: 200px;
    padding: 1%;
    margin-top: 20px;
}
/* H3 inside of about us section */
body > div.aboutSection > div.aboutUs > h3
{
    margin-top: 1%;
    margin-bottom: 1%;
}

.servicesOfferedHeader
{
    height: 100px;
    width: 42%;
    text-align: center;
}

.servicesMenuList
{
    margin-right: 100px;
}

.servicesOfferedBox
{
    clear: left;
    width: 90%;
}

#footer
{
    width: 100%;
    height: 200px;
    clear:both;
}

.wantItGoneFooter
{
    font-size: 1.4em;
    margin-left: 5%;
}

.gotYouCoveredFooter
{
    width: 40%;
    margin-left: 22%;
    font-size: .7em;
    margin-top: 28%;
}

#contactContainer
{
    height: 180px;
}

.logoContainerFooter
{
    margin-left: 0px;
    margin-top: 50px;
    height: 10%;
    font-size: .6em;
}

.emailUs
{
    font-size: .5em;
    margin-left: 25%;
    float: left;
}

}

Answer 1

替换max-device-width的{{1}}，max-width为here in the official documentation

<强>已过时

此功能已从Web标准中删除。一些   浏览器可能仍然支持它，它正在被删除。   避免使用它并尽可能更新现有代码;看到了   本页底部的兼容性表格可指导您做出决定。   请注意，此功能可能随时停止工作。

您可以在get_term_link()中看到有关min/max-device-width和min/max-width之间差异的更多信息，并且当Chrome检查器处于开启状态时，您会发现它有效模拟设备类型 - 在这种情况下基于网格，浏览器无法做到这一点。

退出chrome响应式检查器并调整页面大小时，媒体查询将不起作用

1 个答案: