100vw和100%的区别

  100vw相对于浏览器的window.innerWidth,即浏览器的内部宽度,它是包括滚动条宽度的(如果有的话)。
 
  100%是可用宽度,它不包括滚动条宽度。
 
  从上面的描述可知,在没有滚动条的情况下100vw等于100%,而在有滚动条的情况下100vw不等于100%,且滚动条宽度等于calc(100vw - 100%)。
 
  vw是一个非常好用的尺寸单位,尤其是应用在移动端网页,因为移动端浏览器的滚动条是不占用浏览器内部宽度的,所以无论什么尺寸、什么分辨率的设备,其页面宽度都恒等于100vw,基于这个特点开发者可以很方便地写出自适应页面。

Copyright © 2024 码农人生. All Rights Reserved