字体大小自适应方案
在做一些页面时,可能要求页面内容根据页面宽度自动调整文字大小。例如某元素p字体大小在屏幕宽度320px时为14px,其他宽度自动等比例缩放。
开始之前,需要了解一些单位
- font-size: 10px
- font-size: 100% 相对于父元素
- font-size: 1em 相对于父元素 点击查看兼容性
- font-size: 1rem 相对于根元素html的字体大小点击查看兼容性
- font-size: 1vm 相对于视图宽度的1%点击查看兼容性
方案1: rem + 媒体选择
使用媒体选择,根据浏览器分辨率不同自动设置根节点的字体大小(间隔40px)
可以通过less或者css简化媒体选择部分
方案2: rem + js
|
|
方案3: 使用vm单位
1vm代表宽度的1%,假如给元素指定fontsize的单位是vm时,页面宽度320px时,1vm代表3.2px,640px时代表6.4px,元素内容的字体大小就会自动改变;
方案4: 使用calc(注意:该方案不可行)
css3增加了calc属性,例如
那么是否可以通过calc根据页面宽度计算根节点字体大小呢?calc中模仿方案1,可得如下代码
到底可以不可以呢?经测试,该方法行不动!!!至少上面的写法不可行!
为什么呢?100%页面宽度 / 320 * 10就是具体要的字体大小啊?
为什么呢?
答案: font-size的calc的100%不是代表元素宽度的,而是代表字体大小!!!!!就像font-size:100% 一样;