各种分辨率的手机屏幕-适配方法合集

1.使用viewport，在html文件的中添加meta，简单粗暴：2。添加判断复杂点的viewport，可以封装成js，每次新建html时调用.js：varphoneWidth=parseInt(window.screen.width);varphoneScale=phoneWidth/750;varua=navigator.userAgent;if(/Android(\d+\.\d+)/.test(ua)){varversion=parseFloat(RegExp.$1);if(version>2.3){document.write('')}else{文档。write('')}}else{document.write('')}3.使用rem，一般设置为1rem=100px，最好在写css的width,height,margin,padding的时候进行转换，例如如果设计稿上的位置是52px，转换后就是0.52rem，js代码可以打包成js文件。每次调用：(function(doc,win){vardocEl=doc.documentElement,resizeEvt='orientationchange'inwindow?'orientationchange':'resize',recalc=function(){varclientWidth=docEl.clientWidth;if(!clientWidth)return;if(clientWidth>=640){//最大页面视口设置为640，当大于640px时，文件的font-size=100pxdocEl.style.fontSize='100px';}else{docEl.style.fontSize=100*(clientWidth/640)+'px';//页面视口小于640时，文件的font-size值随视口变化，如果要1rem=50px,你可以设置100替换为50,等等}};if(!doc.addEventListener)return;win.addEventListener(resizeEvt,recalc,false);doc.addEventListener('DOMContentLoaded',recalc,false);})(文档,窗口);使用js后，变化如下：参考：1、使用Flexible实现手淘H5页面的终端适配（https://github.com/amfe/artic...）2.H5iPhone、Android全机型页面适配六大技巧（http://blog.csdn.net/maodoudo...）3.rem、em、px的区别（http://www.runoob.com/w3cnote...)4.一个博客的详细分享链接(http://div.io/topic/1567)