移动端适配(简单的js代码搞定)

14 篇文章 0 订阅
第一步:创建一个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,定义常用的全局变量
@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文件以及公用的less文件



  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值