你需要知道的html{font-size:16px}p{font-size:1rem}1rem=16px;rem与em类似，em是对比父元素的字体大小，rem是对比html的字体大小；实现原理有了以上前提，就可以通过监听屏幕大小来改变html的字体大小，从而达到自适应大小的效果；获取设备宽度与设计稿宽度的比值作为htmlfont-size的大小；如果是750/750，那么font-size:1px；设计稿上200px，代码一定要写200rem；这太大了。通常是750/750*100，除以100；100作为px与rem的换算比例，100px=1rem；那么设计稿是750px7.5rem应该写在代码里；函数getRem(){varhtml=document.getElementsByTagName("html")[0];vardeviceWidth=document.body.clientWidth||文档.documentElement.clientWidth；varrem=deviceWidth/designWidth*100;console.log(rem)html.style.fontSize=rem+"px";}当设计稿为750px时，html{font-size:50px;}50px*7.5=375px;设备的宽度；当设计稿为750px，设备为320px时，320/750100=42.6666667；42.666677.5=320像素；所以当设备为375时，7.5rem为maxWidth，当设备为320时，7.5rem也为maxWidth，达到自适应设备的目的；简单版本完整代码：(function(designWidth,n){functiongetRem(){varhtml=document.getElementsByTagName("html")[0];vardeviceWidth=document.body.clientWidth||documentt.documentElement.clientWidth;varrem=deviceWidth/designWidth*n;console.log(rem)html.style.fontSize=rem+"px";}getRem()window.addEventListener('resize',function(){getRem()})})(750,100)
