編碼的世界 / 優質文選 / 生涯

如何使用CSS3來獲取屏幕寬度並且用來計算DIV高度


2022年7月01日
-   

    稍微出示一下我之前的代碼
 var global_width = ($(window).width());
var info_height = global_width/750*230;
     之前需要用js實現的計算相對高度,現在要交給CSS來實現。
     通過查閱網上的資料,對CSS3又有了新的認識,css對於數值的計算是使用的calc()然而這個方法有的瀏覽器不支持,需要稍微做一下適配。(Kiang一下資料:https://www.w3cplus.com/css3/how-to-use-css3-calc-function.html)
 .elm {
/*Firefox*/
-moz-calc(expression);
/*chrome safari*/
-webkit-calc(expression);
/*Standard */
calc();
}
    然後問題來了,如何獲取屏幕寬度?
    再一次Kiang一下資料:https://www.w3cplus.com/css/7-css-units-you-might-not-know-about.html
.slide {
width: 100vw;
}
    使用vh和vw單位即可
    然後我的問題就得到了解決:
.info_img{
height:calc(100vw / 750 * 230);
}
   
     好使!      感謝百度,感謝上面的兩位程序員!

熱門文章