公司最近的项目，自己独立负责，压力巨大，有什么问题自己解决。下面是本项目首页大屏的踩法。rem首先让我们回顾一下rem的定义。rem是一个css单位。相对于px这个固定的像素单位，rem更加灵活，vm现在也更好了。如果您从未见过它，请先检查一下。简单地说，rem根据根元素的字体大小计算单位。例如：{html:{font-size:10px;}}然后1rem=10px;项目要求无论显示屏大小如何变化，页面呈现的效果都是一样的。让html的字体大小根据分辨率变化。我们在页面中写上rem。由于rem是相对于根元素的字体大小计算的，所以可以达到自适应的效果。自适应——手淘灵活原理：灵活就是根据不同的屏幕计算html的font-size，通过js动态写入meta标签。源码如下：;(function(win,lib){vardoc=win.document;vardocEl=doc.documentElement;varmetaEl=doc.querySelector('meta[name="viewport"]');varflexibleEl=doc.querySelector('meta[name="flexible"]');vardpr=0;varscale=0;vartid;varflexible=lib.flexible||(lib.flexible={});if(metaEl){console.warn('将根据已有的meta标签来设置缩小比例');varmatch=metaEl.getAttribute('content').match(/initial-scale=([d.]+)/);if(match){scale=parseFloat(match[1]);dpr=parseInt(1/scale);}}elseif(flexibleEl){varcontent=flexibleEl.getAttribute('content');if(content){varinitialDpr=content.match(/initial-dpr=([d.]+)/);varmaximumDpr=content.match(/maximum-dpr=([d.]+)/);if(initialDpr){dpr=parseFloat(initialDpr[1]);scale=parseFloat((1/dpr).toFixed(2));}if(maximumDpr){dpr=parseFloat(maximumDpr[1]);scale=parseFloat((1/dpr).toFixed(2));}}}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倍方案，其余使用1x方案if(devicePixelRatio>=3&&(!dpr||dpr>=3)){dpr=3;}elseif(devicePixelRatio>=2&&(!dpr||dpr>=2)){dpr=2;}否则{dpr=1;}}else{//在其他设备下，仍然使用1x方案dpr=1;}规模=1/dpr;}docEl.setAttribute('data-dpr',dpr);如果(!metaEl){metaEl=doc.createElement('meta');metaEl.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);doc.write(wrap.innerHTML);}}functionrefreshRem(){varwidth=docEl.getBoundingClientRect().width;if(width/dpr>1920){//这个位置重点是1920是设计稿的尺寸。如果你的设计稿是750，需要把1920换成750width=docEl.clientWidth/1920*1920;}varrem=宽度/10;docEl.style.fontSize=rem+'px';flexible.rem=win.rem=rem;}win.addEventListener('resize',function(){clearTimeout(tid);tid=setTimeout(refreshRem,300);},false);win.addEventListener('pageshow',function(e){if(e.persisted){clearTimeout(tid);tid=setTimeout(refreshRem,300);}},false);如果(doc.readyState==='完成'){doc.体型.fontSize=12*dpr+'px';}else{doc.addEventListener('DOMContentLoaded',function(e){doc.body.style.fontSize=12*dpr+'px';},false);}refreshRem();flexible.dpr=win.dpr=dpr;flexible.refreshRem=refreshRem;flexible.rem2px=function(d){varval=parseFloat(d)*this.rem;if(typeofd==='string'&&d.match(/rem$/)){val+='px';}返回值；}flexible.px2rem=function(d){varval=parseFloat(d)/this.rem;if(typeofd==='string'&&d.match(/px$/)){val+='rem';}返回值；}})(window,window['lib']||(window['lib']={}));~~~~在项目的libs目录下新建一个flexible.js，将源码复制进去main.js，导入flexible.jsvscode插件px转rem，以上步骤基本完成了自适应的本质，剩下的就是复制设计稿中的px转rem。如果我们要自己动脑筋去计算的话，毫无疑问，这样会使得只剩一根头发没有草了，所以我找了一个可以自动转换px->rem的插件。cssrem第一步当然是搜索并安装cssrem插件。其余步骤用图片解释得更清楚。以上是我用过的真实有效的自适应方法。希望对大家有所帮助，有问题欢迎讨论。
