css3 – CSS媒体查询检测宽度加倍的高度?

前端之家收集整理的这篇文章主要介绍了css3 – CSS媒体查询检测宽度加倍的高度?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
嗨,我有一个全屏的网络应用程序(网站),有些人有非常宽的屏幕,或在他们的浏览器中有一堆工具栏的常规屏幕,使可视区域的宽度超过高度的两倍,我想加载不同的图像对于那种情况.

有没有办法做类似的事情
min-device-aspect-ratio:2
要么
宽度> =高度* 2

解决方法

请参阅min-aspect-ratio和max-aspect-ratio CSS媒体查询

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

然后,您可以使用CSS根据宽高比指定不同的图像(作为背景图像).

/* regular,default image */
#myImage {background-image: url(...)}

/* image to use when screen width is more than double the height */
@media screen and (min-aspect-ratio: 2/1) {
    #myImage {background-image: url(...)}
}

猜你在找的CSS相关文章