- Objective: - Breadcrumb: # 概念阐释 可用于相对调整的单位。 #### em 相对于父元素的字体大小 #### rem `body`下根元素 的字体大小 #### vw，作为响应式字号的单位 - 1vw=1%的[[CSS viewport 视口单位|视口]]宽度view witdh - 如果字号是6vw = 6% x 1200px（视口宽度） = 72px （H1） - 如果视口宽度缩小，6% x 800px(视口宽度) = 48px - 但是只使用视口宽度会让文本失控，**所以永远不要单独使用！** 可以用 `calc()`解决这个问题。即，在固定字号大小( `rem` `em` )的范围内**加上**一个响应式字号单位，最小不低于固定字号。 ```CSS h1 { font-size: calc(1.5rem + 3vw); } ``` # 实例 1. 给出响应式字体大小的代码格式 ```css p{ font-size:calc(1.5em + 2vw) ; } ``` 1. 给出下列代码中文字的px大小： ```css p { font-size:cal(1.2em + 1vw); } ``` 2. (16 x 1.2em) + (1% x 1200px) = 31.2px 3. (16 x 1.2em) + (1% x 800px) = 27.2px <iframe src="https://codepen.io/harryzhu313/pen/PoaLNma" width="720" height="400"></iframe> [实例效果](https://mdn.github.io/css-examples/learn/rwd/type-vw.html) [实例源码](https://github.com/mdn/css-examples/blob/main/learn/rwd/type-vw.html) # 相关内容 # 参考资料 - [MDN](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Values_and_units#%E6%95%B0%E5%AD%97%E3%80%81%E9%95%BF%E5%BA%A6%E5%92%8C%E7%99%BE%E5%88%86%E6%AF%94)