移动端方案

移动端【适配】方案

由于手机屏幕尺寸、分辨率不同，还要要考虑横竖屏问题，为了使得web页面在不同移动设备上【实现尽可能统一或合理的展示效果】，需要在开发过程中使用合理的适配方案。

常见的适配方案如下：

rem适配

rem单位介绍

Rem( font size of the root element) 是一个相对单位，相对于根元素的字号大小进行计算

大多数浏览器的默认字号是16px，因此默认1rem=16px。

rem布局原理

在布局过程中只要使用 rem 设置元素的尺寸，在改变 rem 的基准值 html 的字体大小的时候，页面上的元素将等比例缩放实现适配。

例：

.box{
     width:1rem;
     height:1rem;
}
@media screen and (min-width:320px){
    html{
        font-size:50px;
    }
}
@media screen and (min-width:480px){
    html{
        font-size:75px;
    }
}

由于设备尺寸繁多需要设置密集的断点因此通过js动态计算并设置html的fontsize值是最常用的方式

rem适配实现

1）设置页面的viewport

2）以设计稿为基准值，1rem=100px,使用rem单位取代px常规布局。

3）换算不同设备尺寸下1rem的值，即改变不同尺寸下html 的font-size

<script>
    //获取html宽度（设备宽度）
    var deviceWidth = document.documentElement.clientWidth;    
​
    // 750可以根据实际设计稿的宽度进行修改
    if(deviceWidth>750){ //假设设计稿为750
       deviceWidth = 750;
    }
    var fs = (deviceWidth*100)/750;
    document.documentElement.style.fontSize = fs + 'px';
    
</script>

以上代码假设基准值为设计稿，设计稿宽度为750px,如果页面宽度低于750px,那么页面中html的font-size也会按照（当前页面宽度/750）的比例变化。这样，页面中所有应用了rem的作尺寸单位的元素都会随着页面变化而等比例缩放，从而达到适配。