css视口单位vw,vh的妙用(embed篇)
https://www.bilibili.com/video/av22230745/?spm_id_from=888.80997.embed_other.whitelist
视频demo
如上视频[av9214469
],使用的是embed标签,大家都知道embed的播放器很难自适应,不是过分拉伸改变视频比例,就是写死播放器长宽,导致不能随网页大小的变化自由变换尺寸。
前天,在往博客上折腾B站视频时,无意间灵机一动,想到了个好主意,就是使用vw单位,配合使用calc。
只需级行css就解决了
核心css代码,锁死视频比例16:9
embed { height: calc(9 * 100vw/ 16);width: 100%;
}
宽度设置为100%,宽度铺满父级div【假设父级div就是真个屏幕】,高度设置为屏幕的宽度乘以9/16。
因为刚刚【假设父级div就是真个屏幕】
这样假设了下,实际用起来肯定是多种情况的,比如我的博客电脑端是有侧边栏的,文章的div也是有边距的,而手机端只有边距没有侧边栏。其实只需要做个数学题就好。
这里我得电脑端测栏加边距的宽度大约是330px,手机端的边距太小就忽略不算了
对应的css就是这样
@media only screen and (min-width:768px){
embed{height: calc(9 * (100vw - 330px)/ 16); width: 100%;}
}
@media only screen and (max-width:767px){
embed{ height: calc(9 * 100vw/ 16);width: 100%;}
}
其实就是对于电脑端设备,在宽度设置上,提前减去330px,然后在乘9/16。
原理就是这样,因为我也没有去仔细计算我的模板边距测栏宽度总和是多少,所以比例不可能特别精准,还有就是现在iframe
同样可以用上述方法。
本来,文章写道这里就应该结束了,但是突然想到了香菇社长那个超宽的屏幕,仅仅是上述代码肯定会导致一个问题,视频高度可能会超出屏幕的高度。
怎么办呢?想了一下,觉得这样比较简单!在电脑端css加入下面的东东
max-height:100vh;/*限制视频高度最大不能超过浏览器窗口高度*/
max-width:calc(16 * 100vh/ 9);/*限制视频宽度最大不能超过浏览器窗口高度的16/9*/
这样不管屏幕多奇葩,应该也能保证视频播放器尺寸16:9了哈!如果想要其他尺寸对应的数字改一下就好了。
至于有黑边问题,这个原因有很多,视频素材比例问题?embed播放器尺寸问题?等等
相关文章
- 2018 CSS裸奔节
- css规则定义的分类,CSS规则定义英汉对照表[通俗易懂]
- CSS 水平居中与垂直居中的16个方法
- container html css,splitcontainer「建议收藏」
- css 更改所有text,CSS之cssText「建议收藏」
- 怎么创建css样式表,怎样创建可反复使用的外部CSS样式表?[通俗易懂]
- CSS样式表优先级
- 在html中加入外部css样式,如何引入CSS样式表?
- 常用的css文件_css常用的三种选择器
- CSS笔记(4)
- 【说站】CSS中motion path模块的介绍
- 【说站】css标签选择器的使用注意
- 【说站】css选择器之间的关系
- 学会一行CSS即可提升页面滚动性能
- CSS媒体查询_css网页
- 使用html css实现180箭头旋转,纯CSS实现箭头旋转「建议收藏」
- Typecho | 博客css和js无法加载 前台样式崩了 https相关
- CSS 网页动画
- 属性Oracle的CSS属性:让你的网站更出彩(oracle的css)
- CSS如何影响MySQL的使用(css影响MySQL)
- 器使用Oracle CSS服务器提升业务效率(oracle css服务)
- 解决CSS中display与visibility的区别
- CSS规则层叠的应用css必须要注意的几点
- CSS顶级技巧大放送,div+css布局必知
- php压缩多个CSS为一个css的代码并缓存
- 如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
- div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
- Asp.net程序优化js、css实现合并与压缩的方法