rem原理：如何做一个能自动根据手机大小不同，自动配置rem的功能

　　- rem的原理，如何做一个能自动根据手机大小不同，自动配置rem的功能

　　rem是root em 的简写 ,是根据根元素的字号大小进行的,它是CSS3中新增加的一个尺寸(度量)单位，根节点(html)的font-size决定了rem的尺寸，也就是说它是一个相对单位，相对于(html),浏览器的默认的font-size是16px，1rem默认就等于16px。

　　因为不同手机型号的屏幕大小都不同，所以这时候我们就不能用px来做单位，rem是适配不同手机屏幕的一种方案,设置根元素的font-size来改变rem尺寸

　　假如 html{font-size:20px;} .box{width:1rem;height:1rem;background:red;}将根元素html的font-size设置为20px，此时box的宽高都为20px，也就是1rem = 20px

　　如果用1rem=20px去写页面，那么即使所有的单位换成了rem，依旧还是最终相对于px，没有意义,还是px,不会根据手机大小进行适配,想要做一个能自动根据手机大小不同，自动配置rem的功能

　　- 方法1:利用js动态获取实现

　　首先用js根据不同的视窗宽度动态的改变根元素的font-size ``` //获取视窗宽度(兼容性写法) let rootWidth = document.documentElement.clientWidth || document.body.clientWidth;

　　//获取html元素

　　let rootDom = document.querySelector('html');

　　//动态设置html的font-size(除以10是让浏览器的font-size达到比较合适目的)

　　rootDom.style.fontSize = rootWidth / 10 + 'px';

　　- 方法2:根元素的font-size:某某vw;

　　前面说了如果用1rem=20px去写页面，那么即使所有的单位换成了rem，依旧还是最终相对于px，没有意义,还是px,不会根据手机大小进行适配,想要做一个能自动根据手机大小不同，自动配置rem的功能，所以此时就需要把html{font-size：?px;}这里的单位px换成一个其他的相对单位，如果想要书写QQ音乐或者网易新闻这样的页面，他们是会随着窗口变化而变化的，所以需要换的这个单位得是一个相对于窗口变化的单位，此时就需要引入一个新单位vw v是viewport w是width vw就是一个相对于视口宽度的单位 满屏的时候是100vW，固html设置font-size的时候，单位就可采用vw，但是现在就面临一个问题 font-size：?vw;多少合适回到页面书写的时候，UI设计师给的数据单位是px，而我们页面书写想用rem，但是rem是相对于根元素html，html需要设置的font-size的单位是vw?此时就需要知道px rem vw这3个单位之间的换算px rem vw这3个单位之间的换算已知：1rem=16px 满屏是100vw 假如当前设备是iPhone6，那么此时100vw=375pxtodo 1rem=16px 100vw=375px ---》 1rem=16px 1vw=3.75px 1rem=16px=4.26667vw依次类推，可以假设1rem=100px 假设当前设备是iPhone6，那么此时100vw=375pxtodo 1rem=100px 100vw=375px ---》 1rem=100px 1vw=3.75px 1rem=100px=26.6667vw依次类推，可以假设1rem=120px 假设当前设备是iPhone6，那么此时100vw=375pxtodo 1rem=120px 100vw=375px ---》 1rem=120px 1vw=3.75px 1rem=120px=32vw依次类推，可以假设1rem=100px 假设当前设备是iPhone6plus，那么此时100vw=414pxtodo 1rem=100px 100vw=414px ---》 1rem=100px 1vw=4.14px 1rem=100px=24.15vw 以上只要比例换算是相等的都可以，但是前面2个的换算都是除不尽四舍五入来的，想要保证数据的准确度，建议采用1rem=120px=32vw这个比例假如现在在750的设计图上，ps测量上的文字大小是90px，因为dpr是2，所以此时书写px就是45px，把45px转换成rem，根据1rem=120px这个比例，最终代码书写font-size:0.375rem(45px/120px); 其实就相对于是90/2/120 90/240 这样口算很麻烦，可以在vscode上安装插件 px to rem 插件 设置一下转换比例即可 转换的快捷键是 alt+Z ，设置转换比例为240最终代码书写的时候，需要给html{font-size：32vw;} 假如测量文字大小是90px，代码书写font-size：90px按一下alt+Z，结果就是font-size: 0.38rem;假设现在的设计图是750的，想要用1rem=100px=26.6667vw比例换算，假如ps测量的高度是100px，请问此时书写height：?rem;

　　过程：因为设计图是750的，所以此时dpr是2 如果写px，那么100px此时写成50px但是最终想要用rem写 已知1rem=100px 所以 此时的50px 写成rem就是 0.5rem 。假设现在的设计图是1242的，想要用1rem=100px=24.15vw比例换算，假如ps测量的高度是90px，请问此时书写height：?rem;，过程：因为设计图是1242的，所以此时dpr是3 如果写px，那么90px此时写成30px，但是最终想要用rem写 已知1rem=100px 所以 此时的30px 写成rem就是 0.3rem

　　更多关于“web前端培训”的问题，欢迎咨询千锋教育在线名师。千锋教育多年办学，课程大纲紧跟企业需求，更科学更严谨，每年培养泛IT人才近2万人。不论你是零基础还是想提升，都可以找到适合的班型，千锋教育随时欢迎你来试听。