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

Question

我正在开发一个响应式网络应用。在我的开发工具中，我用触摸（1280 x 950）切换到笔记本电脑，当我不使用开发工具时，它看起来与我在屏幕上看到的非常不同。我通过输入window.innerWidth //返回1280来仔细检查我的屏幕大小 window.innerHeight //返回950

这是css：

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

在标准（非开发工具视图，图像视频看起来很好并且定位到我想要的位置），请参阅：

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是视口高度的百分比度量。

当您打开开发人员工具时，视口会变小（以保存开发工具）。这就是导致您的定位发生变化的原因。