移动页面字体大小设置

December 02, 2019

写移动页面的时候，经常会希望在不同分辨率下显示不同大小的字体

calc + vw

情况1：设置字体大小在不同分辨率下在某个范围内连续变化
例如320px-1000px之间字体大小是16px-22px

响应式页面设计中使用比较多

html {
  font-size: 16px;
}
@media screen and (min-width: 320px) {
  html {
    font-size: calc(16px + 6 * ((100vw - 320px) / 680));
  }
}
@media screen and (min-width: 1000px) {
  html {
    font-size: 22px;
  }
}

中间部分

font-size: calc(16px + (22px - 16px) * ((100vw - 320px) / (1000px - 320px)));

阅读参考The Typekit Blog | Flexible typography with CSS locks

情况2：根据设备宽度改变根元素字体大小，再利用单位rem设置宽高等让页面元素等比缩放

常见于一些活动单页的需求

html {
  font-size: 16px;
}

@media screen and (min-width: 375px) {
  html {
    font-size: calc(16 * 100vw / 375);
  }
}

@media screen and (min-width: 768px) {
  html {
    font-size: 32px;
  }
}

@function px2rem($size) {
  $rem: $size / 16;
  @return #{$rem}rem;
}

.box {
  height: px2rem(20);
}

min max

min max用来设置使用参数列表中的最小或最大值

/* property: min(expression [, expression]) */
width: min(10vw, 4em, 80px);

也可以用在字体大小

html {
  font-size: min(max(16px, 4vw), 22px);
}

clamp

clamp(MIN, VAL, MAX) 相当于 max(MIN, min(VAL, MAX))
下面几个写法结果一样，对应分辨率大小范围是 16 / 4% 和 22 / 4%

body {
  font-size: clamp(16px, 4vw, 22px);
} 

body {
  font-size: max(16px, min(4vw, 22px));
}

body {
  font-size: min(max(16px, 4vw), 22px);
}

使用min max clamp来设置大小范围，虽然很简洁，但兼容性目前不如前面的

其他

使用js的写法，需要监听加载事件，屏幕大小改变事件等，获取clientWidth后计算(设计图大小为375px宽)

// ...
width = win.innerWidth || doc.documentElement.clientWidth || doc.body.clientWidth;
fontSize = 16 * width / 375;
// ...
resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';
// ...
win.addEventListener(resizeEvt, refreshRem, false);
doc.addEventListener('DOMContentLoaded', refreshRem, false);
// ...

参考：
Simplified Fluid Typography | CSS-Tricks

CSS

Comments

Hello World

移动页面字体大小设置

calc + vw

min max

clamp

其他