稍微出示一下我之前的代碼
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);
}
好使! 感謝百度,感謝上面的兩位程序員!