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游览器了