calc配合rem自适应屏幕宽度
css的calc是计算函数,可以通过搜索引擎学习其他的计算思路。
这是该计算函数兼容性。
这里直接开门见山!!
1920设计稿
html {
font-size: calc(100w / 19.2)
}
在1920设计稿中1rem等于100px,.32rem等于32px
随着屏幕的宽度缩小或放大会变
比如:
div {
width: 1rem;
height: 1rem;
font-size: .32rem;
}
-----------------------------------------
同样750设计稿
html {
font-size: calc(100w / 7.5)
}
在750设计稿中1rem等于100px,.32rem等于32px
随着屏幕的宽度缩小或放大会变
比如:
div {
width: 1rem;
height: 1rem;
font-size: .32rem;
}
1rem等于100px这样容易编写。
这样就用不到js去算屏幕宽度计算后给html设置font-size大小,也用不到postcss了吧?
发现在safari 游览器中对fontsize设置calc不管用
100/19.2 = 5.2083333vw
100/7.5 = 13.333333vw
于是我直接把得出的数字用vw写死,这样也可以兼容safari游览器了