rem适配移动端原理
//现代浏览器本身的html根是16px,我们可以采用100/16*100% = 625%;的比例去换算rem
//这样1rem=100px,这样子好换算
// rem转换px 然后适应到其他设备原理
这里以320px宽度的设备为标准去划分,其他宽度划分类似
//然后再根据其他设备的宽度去设定其根值font-size大小
//方式一:
//这是一个例子
@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
html { font-size: 703%; }
}
@media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) {
html { font-size: 732.4%; }
}
@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
html { font-size: 750%; }
}
@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
html { font-size: 781.25%; }
}
@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){
html { font-size: 808.6%; }
}
@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){
html { font-size: 843.75%; }
}
这是根据 360/320*6.25 = 7.03 =》703%;
其他依次
//方式二:
//如果是750的设计稿,即屏幕宽度为375的
//公式为 屏幕宽度/设计稿rem宽度=页面动态font-size值(如:375/7.5=50)
320/7.5 = 42.66667;
//document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px'; 设定基准值
//这样就设置好了每个页面的根fonts-size,因为rem单位是基于根font-size,因此只要确定一种设计稿对应手机的换算,其余屏幕尺寸均可自动适配。
上面我们得出设计稿换算rem的基准值是100,因此只需要把设计稿上的px值除以100即为我们要的rem值。
> Px/100=rem,所以100px=1rem,25px=0.25rem
参考文章:https://www.cnblogs.com/annie211/p/8118857.html
分份法
// rem转换px 然后适应到其他设备原理
//将设备的宽度分为10份,得到一个基础值
// 这里分别是375/400/425的设备,将设备宽度分成10份对应
750/10 = 75px; //75px就是1rem
375的设备 375/10 = 37.5px
400/10 = 40px;
425/10 = 42.5px;
// 原图750宽,其中一个盒子为75px的时候
75/75 = 1 rem;
//在325的设备下
37.5*1 = 37.5px;
//在400的设备下
40*1 = 40px;
//在425的设备下
42.5*1 = 42.5px;
//原图750宽,其中一个盒子为30px的时候
30/75 = 0.4rem;
//375px设备
37.5*0.4 = 15px;
在400px设备时
40*0.4 = 16px;
在425px设备下
42.5*0.4 = 17px;
只要动态划分屏幕为10份设定html的font-size即可