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