移动端前端适配

1.本人比较喜欢用这段js来做适配,可能是比较简洁

$(function () {

    //获取屏幕的宽度分成15份

    var html = document.documentElement;

    var hWidth = html.getBoundingClientRect().width;

    html.style.fontSize = hWidth / 15 + "px";

});

#用less来做计算很方便的

@r: 50rem;

.m-top10 {

  margin-top: 10*2/@r;

}

#但是小编用这个方法偶尔会遇到ios跟android现实不一,等你们遇到留言一起研究吧

2.媒体查询 media query

@media screen and (max-width: 屏幕尺寸px) { //这里写css样式}

#做项目我会最先考虑媒体查询,只要更改css就能实现适配,但是维护成本有点小高,所以不兼容pc端还是不用的好呦

上班期间在讨论适配就顺便记下来,待我持续更新

你可能感兴趣的:(移动端前端适配)