爱好者 > Typecho > 前端笔记 > css视口单位vw,vh的妙用(embed篇)

css视口单位vw,vh的妙用(embed篇)

作者:佚名 来源:爱好者 时间:2017-05-19

  如上视频[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播放器尺寸问题?等等