移动端px、rem兼容适配和转换

移动端px、rem兼容适配和转换

这是按照720的大小做的适配，计算公式为：(document.documentElement.clientWidth / 设计图大小) * 100

//手机端的适配
document.addEventListener("DOMContentLoaded", function () {
    document.getElementsByTagName("html")[0].style.fontSize = (document.documentElement.clientWidth / 720) * 100 + "px";
});
window.onresize = function () {
    document.getElementsByTagName("html")[0].style.fontSize = (document.documentElement.clientWidth / 720) * 100 + "px";
};

@media (min-width: 320px) {
    html {
        font-size: 44px;
    }
}

@media (min-width: 360px) {
    html {
        font-size: 50px;
    }
}

@media (min-width: 375px) {
    html {
        font-size: 52px;
    }
}

@media (min-width: 384px) {
    html {
        font-size: 53px;
    }
}

@media (min-width: 414px) {
    html {
        font-size: 57px;
    }
}

@media (min-width: 448px) {
    html {
        font-size: 62px;
    }
}

@media (min-width: 480px) {
    html {
        font-size: 66px;
    }
}

@media (min-width: 512px) {
    html {
        font-size: 71px;
    }
}

@media (min-width: 544px) {
    html {
        font-size: 72px;
    }
}

@media (min-width: 576px) {
    html {
        font-size: 80px;
    }
}

@media (min-width: 608px) {
    html {
        font-size: 84px;
    }
}

@media (min-width: 640px) {
    html {
        font-size: 88px;
    }
}

@media (min-width: 720px) {
    html {
        font-size: 100px;
    }
}