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

简介: 今天使用到了SUI的路由功能,切换界面的时候可以不用刷新页面,达到了能够返回到之前浏览的ajax界面的位置,用户体验较好。但是由于其中的一个div是使用js根据屏幕宽度计算得来的相对高度,而路由功能的切换界面不会重新加载js,那么我们就需要在css里实现这个功能。

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


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



     好使!

     感谢百度,感谢上面的两位程序员!


相关文章
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
|
2月前
|
前端开发 容器
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
23 3
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
|
2月前
|
前端开发
css 实用技巧 —— div在div中水平垂直居中(两种方法)
css 实用技巧 —— div在div中水平垂直居中(两种方法)
41 3
|
2月前
|
前端开发 容器
你不知道的css——3. 内外尺寸、流宽度、格式化宽度、格式化高度、首选最小宽度、包裹性、最大宽度
你不知道的css——3. 内外尺寸、流宽度、格式化宽度、格式化高度、首选最小宽度、包裹性、最大宽度
24 2
|
2月前
|
前端开发
css 拉伸 resize —— 实现可拉伸的div(含限制拉伸的尺寸)
css 拉伸 resize —— 实现可拉伸的div(含限制拉伸的尺寸)
152 1
|
2月前
|
前端开发 容器
css 动态文本对齐自适应 — 文本宽度小于容器宽度时居中对齐,文本宽度大于容器宽度时居左对齐
css 动态文本对齐自适应 — 文本宽度小于容器宽度时居中对齐,文本宽度大于容器宽度时居左对齐
27 2
|
2月前
|
前端开发
css div填满剩余高度
css div填满剩余高度
52 0
|
3月前
|
前端开发 容器
CSS实现三列布局(左右固定宽度,中间自适应)
CSS实现三列布局(左右固定宽度,中间自适应)
|
4月前
|
编解码 前端开发 UED
div+css详解
总的来说,"div+css"是一种强大的网页布局方法,它提供了灵活性和可维护性,使得网页设计师和开发人员能够创建各种各样的页面布局和风格,同时确保网站具有一致的外观和良好的用户体验。它已成为现代Web开发中的标准实践之一。
98 3
|
4月前
|
前端开发 JavaScript
css 设置div阴影样式
css 设置div阴影样式
42 0