使用js实现适配

使用Element.getBoundingClientRect().width方法
兼容性比较好 IE5+支持

(function () {
    var myhtml = document.documentElement;
    var htmlWidth = myhtml.getBoundingClientRect().width;
    myhtml.style.fontSize = htmlWidth / 15 + "px";
})()

可以直接使用一个自调用函数在js执行时根据当前视口宽度进行调节根节点字体大小,然后配合rem完成适配

使用less
// 设计稿宽度 和 设计稿上的基准值
@psdwidth: 640px;
@baseSize: 100px;
// 要兼容的设备
@deviceWidth: 320px, 360px, 375px, 384px, 411px, 414px, 480px, 549px,600px, 640px, 750px;

@deviceCount: length(@deviceWidth);

//使用遍历的方法,但是less不支持遍历,但是支持方法调用自己,即:递归
//但是也要加调用规则,符合某个条件调用||不符合某个条件终止
//使用when,当符合某个条件时调用
.adapter(@count) when (@count <= @deviceCount){
    @media (min-width:extract(@deviceWidth,@count)) {
      html{
        //等比缩放的关键就是 其他视口宽度的基准值都和 (参考视口+参考基准值) 有关
        font-size: extract(@deviceWidth,@count) / @psdWidth * @baseSize ;
      }
    }
  .adapter(@count+1)
}

.adapter(1);

1 + 8 =

求知若飢,虛心若愚。