文章目录
  1. 1. 方案1: rem + 媒体选择
  2. 2. 方案2: rem + js
  3. 3. 方案3: 使用vm单位
  4. 4. 方案4: 使用calc(注意:该方案不可行)

在做一些页面时,可能要求页面内容根据页面宽度自动调整文字大小。例如某元素p字体大小在屏幕宽度320px时为14px,其他宽度自动等比例缩放。
开始之前,需要了解一些单位

方案1: rem + 媒体选择

使用媒体选择,根据浏览器分辨率不同自动设置根节点的字体大小(间隔40px)

1
2
3
4
5
6
7
8
html { font-size: 10px; }
@media screen and (min-width:360){html{font-size: 11.25px;}} /* 360/320*10**/
@media screen and (min-width:400){html{font-size: 400/320 * 10px;}}
……
@media screen and (min-width:960){html{font-size: 960/320 * 10px;}}
/**具体元素的高度通过rem指定*/
p{font-size: 1.4rem;}

可以通过less或者css简化媒体选择部分

1
2
3
4
5
6
7
.loop(@width) when (@width > 320) {
.loop(@width - 40);
@media screen and (min-width: @width) {
html { font-size: @width/320*10px }
}
}
.loop(960);

方案2: rem + js

1
2
// 设置html的fontsize(未考虑兼容性)之后,内容元素同方案1使用rem指定大小
document.body.parentNode.style.fontSize = document.body.clientWidth/320 * 10 + 'px';

方案3: 使用vm单位

1vm代表宽度的1%,假如给元素指定fontsize的单位是vm时,页面宽度320px时,1vm代表3.2px,640px时代表6.4px,元素内容的字体大小就会自动改变;

1
p { font-size: 14/3.2vm}

方案4: 使用calc(注意:该方案不可行)

css3增加了calc属性,例如

1
div{ width: calc(100%-50px) }

那么是否可以通过calc根据页面宽度计算根节点字体大小呢?calc中模仿方案1,可得如下代码

1
html{font-size: calc(100% / 320 * 10 px)} /**错误*/

到底可以不可以呢?经测试,该方法行不动!!!至少上面的写法不可行!
为什么呢?100%页面宽度 / 320 * 10就是具体要的字体大小啊?
为什么呢?

答案: font-size的calc的100%不是代表元素宽度的,而是代表字体大小!!!!!就像font-size:100% 一样;

文章目录
  1. 1. 方案1: rem + 媒体选择
  2. 2. 方案2: rem + js
  3. 3. 方案3: 使用vm单位
  4. 4. 方案4: 使用calc(注意:该方案不可行)