大佬教程收集整理的这篇文章主要介绍了css – 视口单元,保持纵横比？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
第一个挑战：我的元素的“基本大小”为760×670像素.我想使用视口单元进行缩放,以便高度为100vh,或宽度为100vw,以较小者为准.
不幸的是,虽然我可以使用100vmin来获得两者中的较小者,但我只能将其应用于宽度或高度,而不是两者.
目前我正在使用：
#root { width: 760px; height: 670px; width: 100vw; height: calc(670vw/760); }
这会缩放宽度以适合屏幕,从而产生垂直滚动.这不是太糟糕,但我更喜欢它,如果我真的能让它适合视口.
#elem { width: 100vw; height: calc((9/16)*100vw); } @media (min-aspect-ratio:16/9) { #elem { height: 100vh; width: calc((16/9)*100vh); } }
现场演示：http://jsfiddle.net/C2ZGR/show/(在IE10中打开(适用于Windows 7的预览版);然后重新调整窗口大小,以便宽度或高度都非常小)
我使用了宽高比为16：9的元素,但代码可以适用于任何宽高比 – 只需用您想要的宽高比替换16/9和9/16即可.
顺便说一句,IE10是这个演示可以使用的唯一浏览器. Firefox / Opera还没有实现视口单元,WebKit浏览器目前有一个错误,其中视口单元不能在calc()中使用.
以上是大佬教程为你收集整理的css – 视口单元,保持纵横比？全部内容，希望文章能够帮你解决css – 视口单元,保持纵横比？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。