QQ 爹の博客 QQ 爹の博客

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

in 代码相关 文章转载请注明来源!

什么是视口单位?

在 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

支付宝打赏

文章二维码

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

本文基于《 署名 - 非商业性使用 - 相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
文章链接:https://qqdie.com/archives/a-css-unit-using-viewport-depth.html (转载时请注明本文出处及文章链接)

cssvwvh
发表新评论
已有 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 如果不需要高清就直接拿吧

PREVIOUS NEXT
雷姆
拉姆