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

第一步：新建一个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文件就可以了。

模板简介：该模板名称为【手机移动端使用less文件解决网页自适应适配问题】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【手机建站】栏目查找您需要的精美模板。