字体大小、单位

---

px、em、rem、font-size

px 固定的像素

em 相对于 父元素 或 自身 单位

rem 相对于 根元素 单位, 和父元素的字体大小无关

vw 视口单位

• 100vw等于视口宽度, 1920x1080尺寸 div 宽度为120px,根据换算120px = 1920 / 120 = 16vw, 由于已经计算出 等分值16 , 那么在3960x2048尺寸下 div 的宽度 = 3960 / 16 = 247.5px
• 已经计算出的 等份值 不会因为设计稿尺寸的改变而变化

font-size:100% 继承于 父元素 的字体大小

font-size:100%, 1em, 1rem 都是等于浏览器默认的字体大小

示例

<div class="max-font-12">
    <div class="max-fz">继承父元素大小字体 = 100% * 14 = 14px</div>
    <div class="max-em">这是em单位字体 = 2 * 12 = 24px</div>
    <div class="max-emh">这是em单位字体 = 2 * 12 = 24px</div>
    <div class="max-rem">这是rem单位字体 = 2 * 16 = 32px</div>
</div>
<style scoped="scoped">
    .max-fz{font-size: 100%;}
    .max-em{font-size: 2em;}
    .max-emh{font-size:14px; height: 2em;}
    .max-rem{font-size: 2rem;}
</style>

继承父元素大小字体 = 100% * 14 = 14px

设定自身font-size:14px;height = 2 * 14 = 28px

这是em单位字体 = 2 * 12 = 24px

这是rem单位字体 = 2 * 16 = 32px

font-size和rem的计算

---

# 1、公式
font-size = 设计稿的宽度 / 划分的份数n(可自己设定)
元素rem = 元素px / (设计稿的宽度/划分的份数) = 元素px / html的font-size大小

# 2、touchui
已知设计稿为1280(从文档得知), 从浏览器中设置分辨率宽度为1280时, 观察得到html的font-size为100px, 则
份数N = 1280 / 100(font-size) = 12.8

设置的font-size如下：
document.documentElement.style.fontSize = document.documentElement.clientWidth / 12.8 + "px"

# 3、chbn项目font-size、em的设置
从浏览器观察得知在1600尺寸下, font-size为14px。
按已知的元素高度 = 60px = 60 / 14 = 4.285714285714286em
份数N = 1600 / 14(html的font-size) = 114.2857142857143

设置的font-size如下：
var width = document.documentElement.clientWidth
document.documentElement.style.fontSize = width / (1600 / 14) = (width * 14) / 1600 + "px"

# 4、chbn动态设置font-size如下
$(window).on('resize', function () {
    var width = top.window.innerWidth
    // 转换的结果为font-size = (width * 0.14) / 16，这里算出的结果和第3点的结果是一致的
    // 为什么这里是乘0.14，再除16，就是写的不规范，造成了误解。
    var p = width / 16
    $('html').css('font-size', p * 0.14 + 'px')
})

FAQ

---

1、编译后生成的rem是如何得出？

由在指定设计稿的下元素固定的尺寸 / html的font-size 得出，因此用postcss转换时需要设置html的font-size

2、在1280设计稿下已经生成了rem尺寸为3em，html的font-size不变条件下，在1600尺寸下如何生成rem？

1280 / 3em = 1600 / x，x = 3.75em

3、在CHBN项目中将touchui的样式引进来，是否可行？

touchui设计稿是以1280，input高度为36px；chbn设计稿是1600，input高度为36px。将分辨率调整为1280时，CHBN的input会变成48px，延是不统一了。