一、布局单位

rem：相对于根元素的font-size（html）
em：相对于父元素
占满整个可视窗口
width：100vw
height：100vh

二、常用<meta>屏幕适配标签设置

https://www.jianshu.com/p/f61d77095568

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<!--移动端兼容适配 --> 
<script> 
// class 
! function( navigator ) { 
var userAgent = navigator.userAgent; 
documentElement = document.documentElement; 
if ( userAgent.match( /micromessenger\/5/gi ) ) { 
documentElement.className += " mobile wx_mobile wx_mobile_5"; 
} else if ( userAgent.match( /micromessenger/gi ) ) { 
documentElement.className += " mobile wx_mobile"; 
} else if ( userAgent.match( /ucbrowser/gi ) ) { 
documentElement.className += " mobile uc_mobile"; 
} else if ( /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test( userAgent.toLowerCase() ) ) { 
documentElement.className += " mobile"; 
} else if ( userAgent.toLowerCase().match( /msie/gi ) && ( parseFloat( userAgent.toLowerCase().match( /msie ([0-9]{1,}[\.0-9]{0,})/i )[1] || 999 ) < 9 ) ) { 
documentElement.className += " pc pc-ie pc-ie8"; 
} else if ( userAgent.toLowerCase().match( /msie/gi ) || navigator.msPointerEnabled || navigator.pointerEnabled ) { 
documentElement.className += " pc pc-ie"; 
} else { 
documentElement.className += " pc";  
} 
}( navigator ); 
// meta 
! function( userAgent ) { 
var screen_w = parseInt(window.screen.width), 
scale = screen_w / 640; 
if ( /Android (\d+\.\d+)/.test( userAgent ) ) { 
var version = parseFloat( RegExp.$1 ); 
document.write( version > 2.3 
? '<meta name="viewport" content="width=640, minimum-scale = ' + scale + ", maximum-scale = " + scale + ', target-densitydpi=device-dpi">' 
: '<meta name="viewport" content="width=640, target-densitydpi=device-dpi">' ); 
} else { 
document.write( '<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">' ); 
} 
}( navigator.userAgent ); 
</script> 
<!--移动端兼容适配 end -->

三、lib-flexible适配大屏方案

https://www.jianshu.com/p/7d1876a0222f
https://www.jianshu.com/p/79be33f2ce88
源文件下载：https://www.cnblogs.com/interdrp/p/9042749.html