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;
    }
}

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

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

vh & vw

兩全其美

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

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

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

---

---

---