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


发布者 ourjs  发布时间 1419558567379
关键字 编程技巧  前端 

这个是为了解决什么问题?


我最近在做一个项目。客户要求标题可以根据用户屏幕的尺寸而自动改变大小。我知道我通常用的相对字体单位(注* 如px, pt, em)只是相对于HTML根元素的大小而自动改变,而不是相对于用户的屏幕。

在上网查询之后我发现一种新的字体大小单位,叫做:Viewport-Percentage Lengths.

我是在一MDN的一篇文章 中发现这个Viewport-percentage lengths的,这正是我要找的东西,我只是不知道它叫什么。

它是怎么工作的?


其实非常简单。一个单位相于当前视图窗口大小的1%,宽度和高度是不同的,分别用(vw, vh)表示。你可以通过vmin和vmax设置最大最小值。

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


如果当前视图窗口宽度是100毫米,那么5vw就是5毫米。

vmin 和 vmax 的设置就像这样:

section {
 width: 100vmin;
 background-color: #ff5442;
}


示例


这里有一份完整的示例1示例2

注* Bootstrap之类的响应式布局CSS框架多采用 @media (max-width: *) {} 之类响应式样示实现。

// 屏幕宽度小于767个象素时应用的CSS样式
@media (max-width: 767px) {
   //CSS代码 
}

// 屏幕宽度在767和991象素之间的CSS样式
@media (min-width: 768px) and (max-width: 991px) {
   //CSS代码 
}

此法在大小在跨过临界值时才会发生改变。而vh,vw这样的单位会随窗口大小而立刻发生改变。





回复 (17)
  • #
  • #1 wall 1421244540979

    赞一个

  • #2 石召万 1436943770678

    有用!

  • #3 00 1440750176545

    赞赞赞,试了好多,只有这个有用

  • #4 虞双驰 1450250779815

    好用!

  • #5 池气又 1450834548110

    有用是有用 可他有些浏览区不兼容

  • #6 俞米外 1457684678588

    有用,谢谢楼主分享

  • #7 923971370 1457964068921

    【怎么学习网页制作】 现在很多小伙伴喜欢在互联网上找视频资料学习网页制作,但是光看视频你是不可能学会网页制作的,没有人指导你,而且很多视频已经过时了 并没有什么用! 如果你真的想学习网页制作这门技术,你可以来这个群【494064934】 在这里有最新的HTML课程 免费学习 不需要你付出什么 只要你有一颗学习的心就可以了

  • #8 谢执个 1459930424192

      -

    --

    ##

  • #9 施见示 1477967116657

    但是这个属性的在一些手机上兼容不好

  • #10 郎石入 1481789205941

    hack

  • #11 欧凡公 1489124677390
    • 列表,
  • #12 姜齐劝 1494168972161

    165

      -


  • #13 凌友份 1500024100695

    我就想问兼容其他浏览器吗?兼容问题困扰我很久了,感觉试了很多方法都不怎么实用。

  • #14 孔忆伙 1507302270056

    666

  • #15 殷吗仓 1508217228412

    666

  • #16 白厉迁 1525228450291

    这个方法可以设置文本的最小尺寸吗?就是缩小到一定尺寸后就不再缩小

  • #17 丘辽又 1527009480607

    @白厉迁 #15

    用calc(16px + .1vw) 像这样

微信扫码 立即评论