网页自适应方案，网页长宽按照固定比例，图片不变形

1、js文件设置

设置根属性font-size的值，可以适应屏幕变化，js加载时调用下面函数即可

function setRemSize() {

         fontSizeNum = document.documentElement.clientWidth / 1920 * 100;

         //将得到的rem值复制给根元素的font-size

         document.documentElement.style.fontSize = fontSizeNum + "px";

}

2、css文件设置，这里所设置的页面尺寸是1920x1080,根属性font-size设置100px为了解决首次加载时文字过小的影响，

宽度设置100%，网页宽度可以根据屏幕宽度变化，高度设置10.8rem时 ，跟宽度是按比例变化的，比例是1920x1080

html{
    font-size: 100px;
}
body{
    width:100%;
    height:10.8rem;
    overflow-y: scroll ;
}

比较方便地按照UI的尺寸来设置具体的字体或者div的大小

 div:first-child{
              margin:0 auto;
              width:1.8rem; //180px
              height:.6rem; //60px
              line-height: .6rem;
              color:#ff5400;
              font-size:.28rem;  //28px
              border-bottom:1px solid #ff5400;
}

结合设置这上述两个文件，就可以较好地自适应网页，图片也不容易变形，字体大小也能跟网页变化，也不用计算rem与px之间的换算关系