浏览器px和css px

问题描述

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="a">

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

CSS

* {
    margin:0;
}
.a {
    width: 400px;
    height: 200px;
    background-color: red;
}

@media only screen and (max-width: 800px) {
    .a {
        width: 200px;
    }
}

调整浏览器大小时，元素div的宽度更改为200px，它总是发生在880px（Chrome开发工具）上。

Chrome开发工具显示880px。

Chrome在右上角显示880px，我无法捕获它（需要调整浏览器的大小然后显示）

但是样式显示它发生在800px

为什么不同？

解决方法

https://codepen.io/r0binxp/pen/PoNNbGJ尝试以下示例，只放置@media (max-width: 800px

html responsive-design