欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-03-17 14:56:52
...
第一步:创建一个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文件