Tag: 视口单位

CSS单位 – vh / vw和％之间的区别是什么？

我刚刚了解到一个新的和不寻常的CSS单位。 vh和vw测量视口的高度和宽度的百分比。 我从Stack Overflow看这个问题，但是它使得这个单元看起来更加相似。 vw和vh单元如何工作 答案具体说 vw和vh分别是窗口宽度和高度的百分比：100vw是宽度的100％，80vw是80％等等。 这看起来和%单位完全一样，这是比较常见的。 在Developer Tools中，我尝试将vw / vh的值更改为％，反之亦然，得到了相同的结果。 两者有什么区别？ 如果没有，为什么这些新的单位介绍到CSS3 ？

移动浏览器中的CSS3 100vh不恒定

我有一个非常奇怪的问题…在每一个浏览器和手机版本，我遇到了这种行为： 当你开始滚动页面时，所有的浏览器都有一个顶部菜单，当你加载页面（例如显示地址栏）时，它会向上滑动。 100vh仅在视口的可见部分计算，所以当浏览器栏向上滑动100vh时（以像素为单位） 所有的布局重新绘制和重新调整，因为尺寸已经改变 用户体验不好的跳跃效果 怎么能避免这个问题？ 当我第一次听到视口高度，我很兴奋，我想我可以使用它的固定高度块istead使用JavaScript，但现在我认为唯一的方法来做到这一点实际上是一些resize事件的JavaScript … 您可以在示例站点查看问题 任何人都可以帮我/build议一个CSS解决scheme？ 简单的testing代码： /* maybe i can track the issue whe it occours… */ $(function(){ var resized = -1; $(window).resize(function(){ $('#currenth').val( $('.vhbox').eq(1).height() ); if (++resized) $('#currenth').css('background:#00c'); }) .resize(); }) *{ margin:0; padding:0; } /* this is the box which sould keep constant the height… min-height to allow […]