mobile css & rem & em & px

mobile css & rem & em & px

1 rem === 16px

任意瀏覽器的默認字體高都是 16px,
全部未經調整的瀏覽器都符合: 1em=16px, 那麼12px=0.75em,10px=0.625em;

爲了簡化font-size的換算，須要在css中的body選擇器中聲明 font-size=62.5%，這就使em值變爲 16px*62.5%=10px,
這樣12px=1.2em, 10px=1em,

也就是說只須要將你的原來的px數值除以10，而後換上em做爲單位就好了。

* {
    box-sizing: border-box;
    /* margin: 0; */
    /* padding: 0; */
}
html{
    /* font-size: 16px; */
    /* default 16px === 1rem */
    font-size: 62.5%;
    /* 10px === 1rem */
}

https://engageinteractive.co.uk/blog/em-vs-rem-vs-px

https://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984

Px to Rem

750px === 1rem

//適配不一樣尺寸
(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            // default 16px = 1rem; => 1px = 1/16rem (0.0625rem);
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            // 750px PS & customized 100px = 1rem; => 1px = 1/100rem(0.01rem);
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

//適配不一樣尺寸
(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

https://www.zhangxinxu.com/wordpress/2016/08/vw-viewport-responsive-layout-typography/

1. 直接設定一個臨界點字體大小

基於@media的CSS實現問題在於，內容的彈性自適應只會在臨界點的時候，「Duang」變化下，因而，咱們瀏覽器尺寸拉伸的時候，會感覺到相似「噔噔噔」卡殼的效果

html {
    font-size: 16px;
}
@media screen and (min-width: 600px) {
    html {
        font-size: 18px;
    }
}
@media screen and (min-width: 1000px) {
    html {
        font-size: 22px;
    }
}

1. 使用JS在resize或者屏幕旋轉的時候，動態修改root的font-size大小

使用JS的問題在於他是JS，要保證加載體驗，須要頭部內聯，爲了保證明時性，須要多個瀏覽器變化事件監測

vh & vw

一箭雙鵰

vw，配合CSS3 calc計算實現動態字體大小效果

但願瀏覽器寬度在600px~1000px變化的時候，html根元素的font-size大小是18px~22px之間對應變化的

html { font-size: calc(18px + 4 * (100vw - 600px) / 400); }