media+percentage直接使用mediaquery加percentage来布局。核心思想：页面的主要布局基本都是按百分比设置的。然后可以通过设置媒体查询的断点来设置其他的块布局，比如font-size，从而实现对其他手机尺寸的兼容。优点：灵活、简单、兼容性好、媒体查询，97.65%的浏览器都支持。缺点：设置媒体查询的断点比较麻烦，只能完美适配选定的主流设备尺寸。1px的问题需要额外处理，比如transform:scaleX(0.5)。例子：京东hotcss是一个比较简单实用的方案，理解起来也不难。原理：通过hotcss.js自动计算页面html的font-size，然后在布局中以rem为像素单位，使页面在不同的移动设备上视觉上保持一致。通过获取dpr，在html上设置属性data-dpr，在设置font-size时，可以结合data-dpr以px为像素单位。计算比例，给页面设置viewport，让页面按照dpr进行缩放，最后1个物理像素=1px。这样1px的问题也得到了有效的解决。默认在320px屏幕（非Retina屏幕）下，1rem=20px；核心源码：计算dpr并设置data-dprandscale//计算dprvardpr=window.devicePixelRatio||1;//在其他一些方案中，会区分ios和android，统一设置为1.dpr=dpr>=3?3:(dpr>=2?2:1);//设置数据-dprdocument.documentElement.setAttribute('data-dpr',dpr);//计算scalevarscale=1/dpr,content='width=device-width,initial-scale='+scale+',minimum-scale='+scale+',maximum-scale='+scale+',user-scalable=no';//插入meta，设置页面缩放 varviewport=document.createElement('meta');viewport.setAttribute('name','viewport');viewport.setAttribute('content',content);文档.head.appendChild（视口）；calculatefont-sizeandsetfont-sizeofhtml//获取设备的宽度varinnerWidth=document.documentElement.getBoundingClientRect().width||window.innerWidth;//计算font-seize，默认为320px，1rem=20px.document.documentElement.style.fontSize=(innerWidth*20/320)+'px';优点：后续布局处理简单，配合px2rem插件等使用非常方便，基本上可以很好适配市面上大部分手机。兼容性也比较好，97.62%的浏览器基本都支持rem单位。通过设置缩放比例，有效解决了1px的问题。缺点：页面需要引入额外的js脚本来计算，增加额外的http请求，或者嵌入到页面中增加页面体积。示例：卷皮flexible是手淘推出的解决手淘H5在移动端布局的方案。原理：通过flexible.js自动计算页面html的font-size，然后在页面布局中以rem为单位代替px。如果页面指定了meta[name="viewport"]，直接根据已有的meta标签设置缩放比例；否则，通过dpr自动计算页面缩放比例。设置1rem=10vw，例如在320px屏幕（非Retina屏幕）上，1rem=32px；核心源码：计算缩放比例//尝试获取页面定义的缩放比例varmetaEl=doc.querySelector('meta[name="viewport"]');if(metaEl){console.warn('Thescaling将根据现有元标记进行设置');varmatch=metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);如果（匹配）{scale=parseFloat（匹配[1]）；dpr=parseInt(1/比例);}}//没有则自动计算if(!dpr&&!scale){varisAndroid=win.navigator.appVersion.match(/android/gi);varisIPhone=win.navigator.appVersion.match(/iphone/gi);vardevicePixelRatio=win.devicePixelRatio;if(isIPhone){//iOS下，2屏和3屏使用2倍scheme，其余使用1倍schemeif(devicePixelRatio>=3&&(!dpr||dpr>=3)){dpr=3;}elseif(devicePixelRatio>=2&&(!dpr||dpr>=2)){dpr=2;}否则{dpr=1;}}else{//对于其他设备，仍然使用1x方案dpr=1;}规模=1/dpr;}setmetaif(!metaEl){metaEl=doc.createElement('meta');我taEl.setAttribute('名称','视口');metaEl.setAttribute('content','initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no');如果(docEl.firstElementChild){docEl.firstElementChild.appendChild(metaEl);}else{varwrap=doc.createElement('div');wrap.appendChild(metaEl);医生。写（wrap.innerHTML）；}}计算页面html的font-sizevarwidth=docEl.getBoundingClientRect().width;//最大屏幕宽度为540*dprif(width/dpr>540){width=540*dpr;}//设置1rem=10vwvarrem=width/10;docEl.style.fontSize=rem+'px';flexible.rem=win.rem=rem;优缺点同hotcss例子：淘宝rem+vw是解决方案在计算html的font-size时，是根据vw自动计算的，而不是js脚本动态计算的。vw是一个新的单位，类似于vh、vmin、vmax。定义如下：vw：1vw等于视口宽度的1%；例如，在320px宽度的视口中，1vw=3.2px，10vw=32px，100vw=320px；vh：1vh等于视口高度的1%；例如，568pxheight在嘴里，1vh=5.58px，10vh=56.8px，100vh=568px；vmin：选择vw和vh中最小的；vmax：选择vw和vh中最大的；核心思想：不使用js动态计算page-size的字体，而是设置根元素html的font-size=?vw；这里？，您可以选择一个屏幕尺寸作为参考计算。比如我们认为在iPhone6下，html的font-size是100px。该html=100/375=0.26666666666666666vw的字体大小。那么，其他屏幕的适配计算方法是：iphone5：屏幕为320*568html，font-size=0.2666666666666666*320=85.333333333333333iphone6s：屏幕为414*736html，font-size=0.26666666666666666*414=119.999990使用rem布局而不是px。布局px是根据html的font-size和rem单位自动计算的。优点：不需要引入额外的js脚本来计算，font-size根据vw自动计算。后面的布局也超级简单，直接用rem就可以了。缺点：vw单位的支持相对于rem浏览器来说要少一些。目前，93.65%的浏览器都支持它们。示例：拼多多
