https://blog.csdn.net/m54584mnkj/article/details/109569541
//在我们实际开发的时候，有时候会建立响应时的网页，比如不同的尺寸适 应不同的字体大小，宽高，内外
//等等问题。这样就需要使用响应式的写法来解决问题
//根据设计图的不同尺寸，我们来进行不同的字体大小转换，
// 如果使用老的方法可能要很很多套的字体模板
// 使用rem和vw的形式就可以很方便的解决问题了。
// 自适应网站字体大小的展现的两种形式， vw rem 的形式
// 1. 使用rem的格式进行全网站字体的自适应，可以套用一下的js，然后直接
// 在css内写字体大小就可以了。 单位为rem
// docEl.style.fontSize = 10 * (clientWidth / 4000) + 'px';
// 这里的如果设置10的话，就相当于 1rem = 10px;
<script>
var fun = function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
//这里是假设在750px宽度设计稿的情况下，1rem = 10px；
//可以根据实际需要修改
docEl.style.fontSize = 10 * (clientWidth / 750) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
}
fun(document, window);
</script>
// // 2. 第二种方法我们可以直接使用vw的方法来进行单位的书写。
// 1vw等于视口宽度的1%。
// 1vw = 1920px/100 =19.2 px
// x = y / 100 = z
// 这里的z 是你拿到的图纸的字体的px， y是图纸的宽度， 那么x就是你需要的vw的数字了。
// 或者你可以直接登陆计算 vw得工具，
// https://web-development.space/tools/px-to-vw/
————————————————
版权声明：本文为CSDN博主「chen_sir_sh」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m54584mnkj/article/details/109569541
