多种方法解决rem字体适配

1. rem单位

                      ·rem(root em)相对单位 类似于em，em相对于是父元素的字体大小

                      ·rem的基准是相对于html的字体大小(root根，document的根元素是html)

                      ·rem的优点：通过修改html的文字大小来改变页面整体元素的大小，达到适配效果

实现方法一：媒体查询

                     ·计算方法

                                html字体计算方法：html{font-size:(屏幕的尺寸/划分的份数)；}

                                                   eg:html{font-size:(750px/15);}//15是将屏幕划分为15等份

                               页面元素rem计算方法：页面的元素的px值/font-size;

                                                     eg:.box{width:(100/50rem);}//将100px装换成rem为2rem

                                                    注释：以上计算公式均在lees预处理器中完成不可直接在css文件中计算，可借助计算器完成计算，或用插件完成px转换rem。

                                 媒体查询的缺点：css样式繁琐，不可适配所有的屏幕。

                                                           

<style>
   #将屏幕尺寸划分为15分为例，
//利用媒体查询设置不同屏幕分辨率下的html文字大小
//以下为常见的屏幕尺寸
    //320尺寸时
    @media screen and(min-width:320px){
        html{
            font-size: (320px/15);
        }
    }
    // 360px时
    @media screen and (min-width:360px){
        html{
            font-size: (360px/15);
        }
    }
    // 375px时
    @media screen and (min-width:375px){
        html{
                   font-size: (375px/15);
        }
    }
    // 384px时
    @media screen and (min-width:384px){
        html{
            font-size: (384px/15);
        }
    }
    // 400px时
    @media screen and (min-width:400px){
        html{
            font-size: (400px/15);
        }
    }
    // 500px时
    @media screen and (min-width:500px){
        html{
            font-size: (500px/15);
        }
    }
    // 640px时
    @media screen and (min-width:640px){
        html{
            font-size: (640px/15);
        }
    }
    // 720px时
    @media screen and (min-width:720px){
        html{
            font-size: (720px/15);
        }
    }
    // 750px时
    @media screen and (min-width:750px){
        html{
            font-size: (750px/15);
        }
    }
</style>

实现方法二：JavaScript实现rem适配

    思想与媒体查询一致通过改变html字体大小的方法实现。

function setFontSize(){
    let screenWidth=document.documentElement.clientWidth;//获取设备(屏幕)的宽度
    let fontSizeA=((screenWidth/750)*50>50?50:(screenWidth/750)*50);
    /*
        #750是稿件的宽度
	    #第一个50是当前在稿件中1rem对应的px (此处1rem=50px)
	    #第二个50是限制最大的字体，屏幕尺寸超过750时将字体固定为50px
	    #750和50非固定值,可改变

    */
    document.querySelector("html").style.fontSize=fontSizeA+"px";
}


//在页面加载的时候调用函数setFontSize
window.onload=function(){setFontSize();}
//监听屏幕尺寸，屏幕尺寸发生改变调用函数setFontSize
window.addEventListener("resize",setFontSize);

此时页面元素的rem值：页面元素的px值/50;