移动端 适配

em

em 是一个相对的单位 相对于 当前元素的 字号 (font-size) 2em= 当前的font-size*2 

rem

rem 也是相对单位 但是 跟em的区别 在于 rem 是相对于 html的 font-size

wv,vh

 		 vw 宽
        vh 高
        参考浏览器窗口 分成100等份

rem 适配

 		设计稿 移动端的设计稿 一般都是  宽 750
        开发移动端 调试的时候 一般用的 都是  iphone6/7/8 375*667
        设计稿 宽 750
        手机屏 宽 375
        求 html 的font-size
        html的font-size= 屏/稿*100
        375/750*100=50
        7.5*50=375
        把 所有的 尺寸单位 换成 rem  因为 rem 只跟 html的 fontsize有关
        所以 我们可以通过 修改  html的 fontsize 直接达到适配的效果
        /*7.5*50=375px*/
        所有屏幕正好是7.5rem
		.box{
			width:7.5rem ;
		}

终极适配方案

 html {
            /* font-size: 100vw/750*100; */
            font-size: 13.333333vw;
            /* 375/100*13.33333=50 */
            /* 414/100*13.33333=55.2 */
        }
  .box {
            width: 7.5rem;
            background-color: rgb(21, 170, 41);
            height: 100px;
        }
	//如果是 vue就直接 在pubilc下 index.html里 写
	 * {
            margin: 0;
            padding: 0;
        }
        html {
            font-size: 13.333333vw;
        }