Linux区


css如何实现字体大小(font-size)根据窗口大小变化?

2015年以前,在css里实现网页字体大小根据窗口大小变化,一定要用到javascript、jquery,那个蛋疼不是一般人能受得了的。

今天我发现了一个新技术——使用font-size的最新的自适应单位(vw、vh、vmin、vmax)就可以了!

  • 1vw = 当前视图窗口(viewport)1%的宽度
  • 1vh = 当前视图窗口(viewport)1%的高度
  • 1vmin = 1vw 或 1vh, 取决于哪个更小一点
  • 1vmax = 1vw 或 1vh, 取决于哪个更大一点

注意:这些尺寸单位目前(2017.3)在手机端上是不兼容的!

参考:

CSS3实现的响应式字体:自适应视图窗口大小的新单位 - OurJS

vw - CSS3参考手册

相关博文



发表评论

电子邮件地址不会被公开。