目前我所知道是有几种方法来做适配:
1.使用rem单位来做网页适配,这个是我比较推荐的一种,效果很好,浏览器的兼容性也不错
只要一行代码就能适配多个分辨率终端
(function(doc,win){ var docEl =doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function(){ var clientWidth = docEl.clientWidth>750 ? 750 :docEl.clientWidth; if (!clientWidth) {return}; docEl.style.fontSize = 100 * (clientWidth/750) + 'px'; }; recalc(); if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document,window)
上面是做适配的代码。改变html的font-size,更详细的rem用法在这里不作过多讲解,请网上搜一下(建议基础值设置大一点可以避免因为精度丢失引起的布局错乱,上面我设置的是100px)
2.第二种就是使用浏览器的缩放功能来做,
先按设计稿还原html,然后再设置viewport属性,
(function(){ var W=750,w=parseInt(window.screen.width),s=w/W,u=navigator.userAgent.toLowerCase(),m='<meta name="viewport" content="width='+W+','; if(/android (\d+\.\d+)/.test(u)){ if(parseFloat(RegExp.$1)>2.3)m+='minimum-scale='+s+',maximum-scale='+s+','; }else{ m+='user-scalable=no,'; } m+='target-densitydpi=device-dpi">'; document.write(m); }());
弊端:这种方法在PC端打开部分界面可能会变形,布局错乱,不太推荐这种方法
3.适应响应式布局来做,用媒体查询,具体的可以参考bootstrap,
弊端:冗余代码较多,要做多个分辨率的适配,css代码写的较多。个人不太建议使用这种,除非用成熟的bootstrap框架节省一些工作量。
4.使用自适应百分比来布局,
这种方法比较古老,做出来的界面在各个分辨率的适配上比较不好,例如一个div在分辨率为320*568是320px * 100px 在375 * 667 的分辨率显示就是 375px * 100px 效果不是等比拉升
个人建议使用第一种来做,完美适配任意终端,兼容性杠杠的