Skip to content

rem #3

@smallbore

Description

@smallbore

1. js-改变根字号,px转rem
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if(clientWidth > 640){
clientWidth = 640;
}
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};

if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);
2.css密集点查询 rem

html {
font-size: 62.5%
}
@media screen and (min-width: 320px) {
html {font-size: 14px;}
}

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

@media screen and (min-width: 400px) {
html {font-size: 18px;}
}

@media screen and (min-width: 440px) {
html {font-size: 20px;}
}

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

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions