为什么浏览器设置了缩放比例会对页面效果产生结果？

为什么浏览器设置了缩放比例会对页面产生不一样的效果？尽管设置了缩放，但是屏幕的宽并没有变啊，这点没搞懂。截的图是360浏览器下的结果

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=divece-width,initial-scale=1,maximum-sclae=1,minimum-scale=1,user-scalable=no">
 <title>Document</title>
 <style>
 p{
 color:red;
 text-align:center;
 }
 /*此处写代码*/
 @media screen and (min-width:1100px){
 p{
 color:red;
 }
 }

 @media screen and (max-width:1100px) and (min-width:960px){
 p{
 color:orange;
 }
 }

 @media screen and (max-width:800px) and (min-width:750px){
 p{
 color: green;
 }
 }

 @media screen and (max-width:750px) and (min-width:600px){
 p{
 color: yellow;
 }
 }

 @media screen and (max-width:600px) and (min-width:450px){
 p{
 color: green;
 }
 }

 @media screen and (max-width:450px){
 p{
 color: purple;
 }
 }
 </style>
</head>
<body>
 <p>
 我的颜色会随着屏幕大小的变化而变化。
 </p>
</body>
</html>

是否可以坚持走得更远些 2018-09-12

源自：响应式布局 2-5 编程练习

收起

1回答

好帮手慕星星回答被采纳获得+3积分 2018-09-12 19:03:59

1、此处的代码应该是960px哦

2、meta标签中有错误：

3、你看到的浏览器中的宽度，是可视化区域的宽度

这个宽度在浏览器缩放过程中是不会变的。但是body的实际宽度是变的，如下：

正好是按照比例缩放的，body实际宽度（加上左右的padding）是浏览器可视化宽度/缩放比例。

祝学习愉快~~

收起回答

是否可以坚持走得更远些提问者 #1

老师，我想问的就是，浏览器缩放了，但是屏幕的宽度是保持不变的呀，那竟然屏幕宽度不变，按理来说这个案例的颜色应该也不会变啊，但是实际情况是，我保持了屏幕的宽度不变，然后浏览器设置了50%和100%的缩放后，字体颜色变化了，这是什么原因？

2018-09-12 19:23:18
好帮手慕星星回复提问者是否可以坚持走得更远些 #2

上面已经说过了哦，你看到的数字是浏览器的可视化宽度，当浏览器缩小50%之后，页面body是放大了一倍（可视化宽度/50%），代码中设置的最大宽度和最小宽度是根据页面的body来显示的哦，不是根据浏览器的可视宽度来计算的。在正常比例情况下，可视化宽度与body一致，也可以看成是根据浏览器的可视化宽度来变化。

2018-09-13 09:46:31
是否可以坚持走得更远些提问者回复好帮手慕星星 #3

经过测试最大宽度和最小宽度是根据页面的body来显示的，还一直以为是根据可视宽度来着。

2018-09-13 09:55:35