根據設計稿 -- 移動端單位的設置

引入less文件：

// 設計圖750 使用flexible
// px ==> rem, 設計稿尺寸 除以 75，單位 rem
// 使用例如： height:40*base;

@base: round(1/75,6) * 1rem;


//  less 寫一個minin
//  使用方法：.px2rem(height,40);
//  對屬性進行設置
//  @name ---- 它是指元素的屬性，
//  @px ---- 是指咱們UI圖中標註的尺寸

.px2rem(@name, @px){
	@{name}: round(@px / 75, 6) * 1rem;
}




// 我們在iPhone3G和iPhone4的Retina屏下面，希望看到的文本字號是相同的。
// 也就是說，我們不希望文本在Retina屏幕下變小，另外，我們希望在大屏手機上看到更多文本，
// 以及，現在絕大多數的字體文件都自帶一些點陣尺寸，通常是16px和24px，
// 所以我們不希望出現13px和15px這樣的奇葩尺寸。
// 爲了方便，我們也寫一個minin
// 使用方法： .font-size(32);
// @px --- 是指咱們UI圖中標註的尺寸

.font-size(@px){

	// 默認是dpr 1
	font-size: round(@px / 2) * 1px; 

	// 蘋果4，蘋果5 dpr
	[data-dpr='2'] & {
		font-size: @px * 1px;    
	}

	// for mx3
	[data-dpr='2.5'] & {
		font-size: round(@px * 2.5 / 2) * 1px;
	}

	// for 小米node
	[data-dpr='2.75'] & {
		font-size: round(@px * 2.75 / 2) * 1px;
	}

	// 蘋果6plus dpr 3
	[data-dpr='3'] & {
		font-size: round(@px * 3 / 2 ) * 1px;   
	}

	// for 三星node4
	[data-dpr='4'] & {
		font-size: @px * 2px;
	}
}

然後在自己的less文件裏：

@charset "UTF-8";
@import '../static/less/rem.less';

@themeColor:#1890ff;

.ex{
    .px2rem(height,76);
	.px2rem(line-height,76);
	.px2rem(font-size,32);
	.px2rem(border-radius,50);
	.px2rem(-webkit-border-radius,50);
}

配合一下自適應大小的js文件：

!function(a,b){function c(){var b=f.getBoundingClientRect().width;/*b/i>540&&(b=540*i);*/var c=b/10;f.style.fontSize=c+"px",k.rem=a.rem=c}var d,e=a.document,f=e.documentElement,g=e.querySelector('meta[name="viewport"]'),h=e.querySelector('meta[name="flexible"]'),i=0,j=0,k=b.flexible||(b.flexible={});if(g){console.warn("將根據已有的meta標籤來設置縮放比例");var l=g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);l&&(j=parseFloat(l[1]),i=parseInt(1/j))}else if(h){var m=h.getAttribute("content");if(m){var n=m.match(/initial\-dpr=([\d\.]+)/),o=m.match(/maximum\-dpr=([\d\.]+)/);n&&(i=parseFloat(n[1]),j=parseFloat((1/i).toFixed(2))),o&&(i=parseFloat(o[1]),j=parseFloat((1/i).toFixed(2)))}}if(!i&&!j){var p=(a.navigator.appVersion.match(/android/gi),a.navigator.appVersion.match(/iphone/gi)),q=a.devicePixelRatio;i=p?q>=3&&(!i||i>=3)?3:q>=2&&(!i||i>=2)?2:1:1,j=1/i}if(f.setAttribute("data-dpr",i),!g)if(g=e.createElement("meta"),g.setAttribute("name","viewport"),g.setAttribute("content","initial-scale="+j+", maximum-scale="+j+", minimum-scale="+j+", user-scalable=no"),f.firstElementChild)f.firstElementChild.appendChild(g);else{var r=e.createElement("div");r.appendChild(g),e.write(r.innerHTML)}a.addEventListener("resize",function(){clearTimeout(d),d=setTimeout(c,300)},!1),a.addEventListener("pageshow",function(a){a.persisted&&(clearTimeout(d),d=setTimeout(c,300))},!1),"complete"===e.readyState?e.body.style.fontSize=12*i+"px":e.addEventListener("DOMContentLoaded",function(){e.body.style.fontSize=12*i+"px"},!1),c(),k.dpr=a.dpr=i,k.refreshRem=c,k.rem2px=function(a){var b=parseFloat(a)*this.rem;return"string"==typeof a&&a.match(/rem$/)&&(b+="px"),b},k.px2rem=function(a){var b=parseFloat(a)/this.rem;return"string"==typeof a&&a.match(/px$/)&&(b+="rem"),b}}(window,window.lib||(window.lib={}));