CSS目前有42种单位,包括常用的px、%、em、rem等。新单位dvh和dvw可以动态调整视口尺寸。虽然我只使用了20%,但这些单位在特定场景下各有其价值。
使用`vh`单位可能导致手机上全屏显示问题,因为其高度与实际视口高度不一致。建议使用`dvh`单位以动态调整高度,确保页面元素正确显示。
本文介绍了移动视口错误(100vh bug)及解决方法,包括CSS和Javascript的修复方法,使用-webkit-fill-available属性和第三方库postcss-100vh-fix。同时提到了CSS Values 4规范中的新视口单位dvh。
移动视口错误(100vh bug)是移动浏览器中的一个问题,导致全屏元素在地址栏可见时被切断。解决方法包括使用CSS和Javascript监听resize事件,使用-webkit-fill-available属性,或使用第三方库postcss-100vh-fix。另外,可以使用新的视口单位dvh来解决问题。这些方法都能有效解决移动视口错误,使工作更轻松。
完成下面两步后,将自动完成登录并继续当前操作。