h5 页面切图

 

第一种 自己写个js 根据页面宽度去计算字体大小

要吧页面上的body的option 设置成0 防止页面闪屏

window.addEventListener('DOMContentLoaded', function (){ var shuping = 'onorientationchange' in window ? 'orientationchange' : 'resize'; var timer = null; //设置字体 function setFontSize(){ var w = document.documentElement.clientWidth || document.body.clientWidth; document.documentElement.style.fontSize = 100*w/640 + 'px'; setTimeout(function(){ document.getElementsByTagName('body')[0].style.opacity = 1; },1000) } setFontSize(); window.addEventListener(shuping, function (){ clearTimeout(timer); timer = setTimeout(setFontSize, 300); }, false); }, false);

第二种 用hotcss.js

具体怎么使用请参考 https://github.com/imochen/hotcss

gulp 自动化工具 hotcss.rar

第三种 使用Flexible实现手淘H5页面的终端适配

请参考 http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

转载于:https://www.cnblogs.com/jiajunyu/p/5857433.html