QQ爹の博客 QQ爹の博客

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

in 代码相关 read (1313) 文章转载请注明来源!

什么是视口单位?

在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等传统单位,视口单位作为辅助单位比较好。
视口单位,解决某些问题会有奇效,但是如果作为主要单位使用时会很坑...

jrotty WeChat Pay

微信打赏

jrotty Alipay

支付宝打赏

文章二维码

扫描二维码,在手机上阅读!

cssvwvh
最后由Jrotty修改于2017-05-19 11:06
发表新评论
已有 15 条评论
  1. 香菇
    香菇Windows 10傲游浏览器 回复

    听说很不友好

    1. Jrotty
      Jrotty本文作者Windows 10谷歌浏览器 回复

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

  2. shyling
    shylingMac OS XSafari浏览器 回复

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

    1. Jrotty
      Jrotty本文作者Windows 10谷歌浏览器 回复

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

  3. Stephen
    StephenWindows 10谷歌浏览器 回复

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

    1. Jrotty
      Jrotty本文作者Windows 10谷歌浏览器 回复

      @Stephen 恩,文章中提到的只是一次尝试

      1. Stephen
        StephenWindows 10谷歌浏览器 回复

        @Jrotty

  4. Zl
    ZlAndroid L谷歌浏览器 回复

    对你的一言接口很感兴趣的说

  5. 蔡锶铎
    蔡锶铎Android谷歌浏览器 回复

    还是px好用 视口单位都没听说过

    1. Jrotty
      Jrotty本文作者iPhone OSUC浏览器 回复

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

  6. yufan
    yufanAndroid L谷歌浏览器 回复

    背景不错,人渣的本愿
    图可以收走吗hh

    1. Jrotty
      Jrotty本文作者iPhone OSUC浏览器 回复

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

前篇 后篇
雷姆
拉姆
音乐加载中...
0:00