移动页面字体大小设置
写移动页面的时候,经常会希望在不同分辨率下显示不同大小的字体
calc + vw
例如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
常见于一些活动单页的需求
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
下面几个写法结果一样,对应分辨率大小范围是 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);
// ...
参考:
Comments