CSS视口单位的一次深度使用

前端笔记 css vw vh 2017-04-23

什么是视口单位?

在CSS规范中,有4种类型的可用视口单位:

  • vw — 1vw 等于视口宽度的 1%
  • vh — 1vh 等于视口高度的 1%
  • vmin — vw 和 vh 中的较小值
  • vmax — vw 和 vh 中的较大值
  • 视口,即浏览器屏幕大小,1vw 等于浏览器宽度的 1%,100vw 即整个浏览器的宽度。

简单来说,它和px,rem一样就是个单位,适当的使用这种单位有时候能出奇效。

:IE9使用vm代替vmin。它不支持vmax。
澄清:1vmax等于1vh在纵向模式,而在横向模式下,1vmax将等于1vw。
个人建议:使用视口给元素设置宽高时,为了避免比例不协调,使用同一个单位比较好,如vmin、vmax。

兼容性

IE9+局部支持,chrome/firefox/safari/opera支持,ios safari 8+支持,android browser4.4+支持,chrome for android39支持

博主使用情况

我在 https://tool.qqdie.com/ 上就深度使用了这个单位,甚至字体大小都用这个设置的。

费了很久的时间去调试,现在在我电脑上看已经感觉可以了
但是,
如果你的显示器很大,那么字体也会超乎寻常的大

还有就是高度设置成100vh在一些手机浏览器上显示上有些奇怪,100vh应该是铺满全屏,但是在手机浏览器上却可以滚动,相当于高度设置多了,猜测原因是视口可能计算了手机整个屏幕的视口,而不是浏览器视口。

yodu模板上只有一处使用了视口单位,因为写模板时已经忘记这个单位了,后来因为模板有个地方不是很美观求助香菇时,他提到了这个才想起来,于是用上了下。

博主评价

正常写模板建议还是主要用px,rem等传统单位,视口单位作为辅助单位比较好。
视口单位,解决某些问题会有奇效,但是如果作为主要单位使用时会很坑...

15条评论

    香菇

    听说很不友好 @(滑稽)

    游客 Windows10 889天前回复

      Jrotty
      @香菇

      我发现用来设置embed比例比较好,宽度100%,高度设置为100vw减去侧栏等宽度大约330px,然后乘上9,在除以16,妥妥的16:9 @(笑尿)

      作者 Windows10 885天前回复

    shyling

    这个东西适合设置最外面 containner 的大小,感觉 vh 用的多一点

    游客 IpadOS 907天前回复

      Jrotty
      @shyling

      是的,我的这个模板也就用了一个vh

      作者 Windows10 892天前回复

    Stephen

    千万不用把字体大小也用vh vw,很不友好

    游客 Windows10 909天前回复

      Jrotty
      @Stephen

      恩,文章中提到的只是一次尝试 @(呵呵)

      作者 Windows10 909天前回复

        Stephen
        @Jrotty

        @(吐舌)

        游客 Windows10 909天前回复

    Zl

    对你的一言接口很感兴趣的说 @(滑稽)

    游客 安卓棒棒糖 909天前回复

    蔡锶铎

    还是px好用 视口单位都没听说过 @(笑尿)

    游客 安卓 909天前回复

      Jrotty
      @蔡锶铎

      挺有趣的单位,但是作为主要单位使用感觉很坑

      作者 Ios 909天前回复

    yufan

    背景不错,人渣的本愿 @(滑稽)
    图可以收走吗hh

    游客 安卓棒棒糖 910天前回复

      Jrotty
      @yufan

      如果不需要高清就直接拿吧

      作者 Ios 910天前回复

    尚寂新

    原来泽泽你的api是开放使用的 @(滑稽)
    之前扒你一言一直都没敢引用你一言的api @(笑尿)

    游客 Linux 910天前回复

      Jrotty
      @尚寂新

      说不准以后会不会变成私用的

      作者 Ios 910天前回复

    雨落无声

    沙发归我了~ 前排出售瓜子,零食,饮料,泽泽女装。 @(滑稽)

    游客 MacOS 910天前回复

智能推荐