如何使用CSS3来获取屏幕宽度并且用来计算DIV高度

稍微出示一下我之前的代码

    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);
}

好使！

感谢百度，感谢上面的两位程序员！

如何使用CSS3来获取屏幕宽度并且用来计算DIV高度相关推荐

获取屏幕宽度、浏览器宽度、网页高度，宽度信息
视图模式innerWidth/innerHeight属性(窗口大小) window.innerHeight window.innerWidth window.pageYOffset:Netscape ...
微信小程序如何获取屏幕宽度
微信小程序如何获取屏幕宽度方法1: imageLoad: function () {this.setData({imageWidth: wx.getSystemInfoSync().windowWi ...
unity5.x C# 获取屏幕宽度设置不受重力影响
在unity5.x中,获取屏幕宽度代码如下: float screenWeight = Screen.width; //获取屏幕宽度 Screen.width 在此获取屏幕的宽度,从而赋值给scree ...
android中屏幕宽高显示不全,Android 获取屏幕宽度跟高度
Android 获取屏幕宽度跟高度在android开发过程中,对于控件的高度,宽度,通过下面的函数调用,轻松实现编程中设置控件的相对宽度跟高度: // 获得屏幕的宽度 public static i ...
Android获取屏幕宽度高度并动态设置控件宽度，比例等
1.Android获取屏幕宽度的几种方法: //1.通过WindowManager获取DisplayMetrics dm = new DisplayMetrics();int heigth = dm. ...
Android 获取屏幕宽度，dp,sp,px转换方法
获取屏幕宽度 WindowManager wm = this.getWindowManager(); //this 指代当前的activity DisplayMetrics dm= new Displ ...
JQ获取屏幕宽度，以及分辨率发生改变时既触发函数
获取屏幕宽度 var winWide = $(window).width();console.log(winWide); 分辨率改变时既触发函数 $(window).resize(function() ...
jq获取页面高度_js与jquery获取屏幕宽度与高度
1,javascript获取屏幕宽度与高度网页可见区域宽: document.body.clientwidth 网页可见区域高: document.body.clientheight 网页可见区域宽 ...
Android中获取屏幕宽度（利于屏幕适配）
一.在adapter中获取屏幕宽度 WindowManager windowManager = (WindowManager) getContext().getSystemService(Contex ...

如何使用CSS3来获取屏幕宽度并且用来计算DIV高度

如何使用CSS3来获取屏幕宽度并且用来计算DIV高度相关推荐

最新文章

热门文章