欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 移动运营 > 手机建站 >

    手机移动端使用less文件解决网页自适应适配问题

    2018-05-10 09:19 来源/作者:懒人模板 分类:手机建站  « »
    第一步:新建一个less文件 定义常用的全局变量
    @size: 100*1rem;  
    /*修改大小的函数*/  
    .width(@num) {  
      width: @num / @size;  
    }  
      
    .height(@num) {  
      height: @num / @size;  
    }  
      
    .line-height(@num) {  
      line-height: @num / @size;  
    }  
      
    .border(@num,@color) {  
      border: @num/@size solid @color;  
    }  
      
    .border-radus(@num) {  
      border-radius: @num/@size;  
    }  
      
    .font-size(@num) {  
      font-size: @num / @size;  
    }  
      
    .color(@color) {  
      color: @color;  
    }  
      
    .bg-color(@color) {  
      background: @color;  
    }  
      
    .margin(@t,@r,@b,@l) {  
      margin: @t/@size @r/@size @b/@size @l/@size;  
    }  
      
    .padding(@t,@r,@b,@l) {  
      padding: @t/@size @r/@size @b/@size @l/@size;  
    }  
      
    .max-width(@num) {  
      max-width: @num/@size;  
    }  
      
    .min-width(@num) {  
      min-width: @num/@size;  
    }  
    .min-height(@num) {  
      min-height: @num/@size;  
    }  
      
    //伪类图片  
    .after-bg(@w,@h) {  
        content: '';  
        display: block;  
        .width(@w);  
        .height(@h);  
        .backgroud-size();  
    }  

    第二步:新建一个js文件,文件名自定义。

    (function(doc, win) {  
        var docEl = doc.documentElement,  
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',  
            recalc = function() {  
                var clientWidth = docEl.clientWidth;  
                if (!clientWidth) return;  
                if(clientWidth>=750){  
                  docEl.style.fontSize = '100px'  
                }else{  
                  docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';  
                }  
      
            };  
        if (!doc.addEventListener) return;  
        win.addEventListener(resizeEvt, recalc, false);  
        doc.addEventListener('DOMContentLoaded', recalc, false);  
    })(document, window); 

    第三步:在公共地方调用less文件和js文件就可以了。  

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议