chrome浏览器中dev工具中的px值与css像素值
chrome浏览器中dev工具中的px值与css像素值
提问于 2020-10-09 13:57:31
我正在学习CSS并理解像素是如何工作的。假设我有一个HTML：
<div id='first' class='float-child'>
<p>The img element tells the browser, “Place an image here.” You’ve already gotten
a glimpse of it used to place banner graphics in the examples in Chapter
4, Creating a Simple Page. You can also place an image element right in the
flow of the text at the point where you want the image to appear, as in the
following example. Images stay in the flow of text, aligned with the baseline
of the text, and do not cause any line breaks (HTML5 calls this a phrasing
element), as shown in FIGURE 7-2:</p>
</div>现在我将div设置为1200 px：
#first {
background-color: blueviolet;
width:1200px;
}如果我用Chrome中的任何像素标尺测量div，我会看到它是1200 px (第一张照片)，但如果我使用chrome dev工具并通过缩小浏览器窗口来测量div，div似乎是1093 px (第二个img)。
我不能理解为什么Chrome Dev工具报告的像素少了大约100px，或者是我对像素的理解有问题？
回答 2
Stack Overflow用户
发布于 2020-10-09 14:30:40
我认为你把窗口的宽度和div#first的宽度混在一起了。
实际上，你在右上角看到的数字是窗口的宽度。
要查看div的真实宽度，只需向下滚动到右侧的css即可查看。
在下图中，你可以看到红色的和绿色的。
因此，如果您在div上设置的高度比在屏幕尺寸上设置的高度大得多，那么高度也会发生同样的情况。
演示：
#first {
background-color: blueviolet;
width:1200px;
}<div id='first' class='float-child'>
<p>The img element tells the browser, “Place an image here.” You’ve already gotten
a glimpse of it used to place banner graphics in the examples in Chapter
4, Creating a Simple Page. You can also place an image element right in the
flow of the text at the point where you want the image to appear, as in the
following example. Images stay in the flow of text, aligned with the baseline
of the text, and do not cause any line breaks (HTML5 calls this a phrasing
element), as shown in FIGURE 7-2:</p>
</div>
Stack Overflow用户
发布于 2020-10-12 09:07:49
我将缩放级别设置为90%，因此窗口宽度比框宽小(大约100px)，即使我拖动窗口只是为了触摸框的右边缘。我对CSS非常陌生，从那时起，我一直在阅读CSS像素、设备像素、缩放等方面的内容。理解这些概念似乎有点耗时。我希望了解它们是如何工作的，并在未来的某一天补充这个答案。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64274651
复制相关文章
相似问题
腾讯云开发者
