近期项目需要，移动端使用rem单位布局，我之前一直用vw和vh单位，用这也能实现，没啥毛病，但是公司领导让换单位，咱也得改是吧，下面是从网易，淘宝等大厂抄的作业：

首先，移动端要想使用vw或rem，请先在head添加meta，将视图比例一比一，不允许缩放。

以下是4种不一样的计算1rem的方法 

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

1.使用css的media媒体查询兼容不同设备尺寸，设置不同的跟元素大小：font-size——这个好像是网易的

			@media screen and (max-width:320px) {
				html {
					font-size: 42.667px;
					font-size: 13.33333vw
				}
			}
			
			@media screen and (min-width:321px) and (max-width:360px) {
				html {
					font-size: 48px;
					font-size: 13.33333vw
				}
			}
			
			@media screen and (min-width:361px) and (max-width:375px) {
				html {
					font-size: 50px;
					font-size: 13.33333vw
				}
			}
			
			@media screen and (min-width:376px) and (max-width:393px) {
				html {
					font-size: 52.4px;
					font-size: 13.33333vw
				}
			}
			
			@media screen and (min-width:394px) and (max-width:412px) {
				html {
					font-size: 54.93px;
					font-size: 13.33333vw
				}
			}
			
			@media screen and (min-width:413px) and (max-width:414px) {
				html {
					font-size: 55.2px;
					font-size: 13.33333vw
				}
			}
			
			@media screen and (min-width:415px) and (max-width:480px) {
				html {
					font-size: 64px;
					font-size: 13.33333vw
				}
			}
			
			@media screen and (min-width:481px) and (max-width:540px) {
				html {
					font-size: 72px;
					font-size: 13.33333vw
				}
			}
			
			@media screen and (min-width:541px) and (max-width:640px) {
				html {
					font-size: 85.33px;
					font-size: 13.33333vw
				}
			}
			
			@media screen and (min-width:641px) and (max-width:720px) {
				html {
					font-size: 96px;
					font-size: 13.33333vw
				}
			}
			
			@media screen and (min-width:721px) and (max-width:768px) {
				html {
					font-size: 102.4px;
					font-size: 13.33333vw
				}
			}
			
			@media screen and (min-width:769px) {
				html {
					font-size: 102.4px;
					font-size: 13.33333vw
				}
			}

2.基于750尺寸计算出基础单位，其他均按照这个尺寸换算 

html {
	font-size: calc( 100vw / 7.5);
}

3.通过js计算，每次刷新窗口就重新计算rem 

(function (window, document) {
	      var getRem = function () {
	        if (document) {
	          var html = document.documentElement;
	          var hWidth = (html.getBoundingClientRect().width) * (750 / 352);
	          console.log(hWidth)
	          html.style.fontSize = hWidth / 16 + "px";
	          console.log(html.style.fontSize)
	        }
	      };
	      getRem();
	      window.onresize = function () {
	        getRem();
	      }
 })(window, document)

4.淘宝手机端 计算1rem的js 

!function(e,t){var n=t.documentElement,d=e.devicePixelRatio||1;function i(){var e=n.clientWidth/3.75;n.style.fontSize=e+"px"}if(function e(){t.body?t.body.style.fontSize="16px":t.addEventListener("DOMContentLoaded",e)}(),i(),e.addEventListener("resize",i),e.addEventListener("pageshow",function(e){e.persisted&&i()}),2<=d){var o=t.createElement("body"),a=t.createElement("div");a.style.border=".5px solid transparent",o.appendChild(a),n.appendChild(o),1===a.offsetHeight&&n.classList.add("hairlines"),n.removeChild(o)}}(window,document)