CSS 定位在开发工具中看起来非常不同

Question

我正在开发响应式网络应用程序。在我的开发工具中，我已经切换到触摸笔记本电脑 (1280 x 950)，它看起来与我不使用开发工具时在屏幕上看到的非常不同。我仔细检查了我的屏幕尺寸，输入 window.innerWidth//返回 1280window.innerHeight//返回 950

这是CSS:

.video-player{
    position: relative;
    top: 20vh;
}

在标准(非开发工具 View ，图像视频看起来不错并且定位到我想要的位置)上，请参见:

https://image.ibb.co/hKSF75/Screen_Shot_2017_08_02_at_2_05_12_PM.png

在开发工具上切换 1280 x 950(图像看起来不像它已定位到靠近其上方黄色条顶部的位置)，请参阅:

https://image.ibb.co/htpZ0Q/Screen_Shot_2017_08_02_at_2_05_01_PM.png

Answer 1

vh 是视口(viewport)高度的百分比度量。

当您打开开发人员工具时，视口(viewport)会变小(以容纳开发工具)。这就是导致您的定位发生变化的原因。