移动端rem

最新推荐文章于 2024-04-13 13:14:42 发布

Ai-leen

最新推荐文章于 2024-04-13 13:14:42 发布

阅读量243

点赞数 1

分类专栏：前端基础文章标签：个人笔记

本文链接：https://blog.csdn.net/weixin_38144989/article/details/90897843

版权

前端基础专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.通过css3 media查询做响应式布局

html {
    font-size: 625%;
}

@media(max-width:540px) {
    html {
        font-size: 450%;
    }
}

@media(max-width:414px) {
    html {
        font-size: 345%;
    }
}

@media(max-width: 375px) {
    html {
        font-size: 312.5%;
    }
}

@media(max-width:360px) {
    html {
        font-size: 300%;
    }
}

@media(max-width:320px) {
    html {
        font-size: 267%;
    }
}

@media(max-width:270px) {
    html {
        font-size: 225%;
    }
}

2.通过js做自适应布局

var docEl = document.documentElement || document.body;
var resizeEvt = 'orientation' in window ? 'orientationchange' : 'resize';
var recalc = function () {
    var clientWidth = docEl.clientWidth;
    if (!clientWidth) {
        return
    }
    docEl.style.fontSize = 100 * clientWidth / 640 + "px"
};
recalc();