xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

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- 600px) {
    html {
        font-size: 18px;
    }
}
@media screen and (min- 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); }

---

---

---