移动端Rem单位的具体用法？

Question

网上看了很多Rem方面的教程，感觉还是不太理解。

根目录html设置一个font-size

html{ font-size: 16px; }

上面这个font-size值是自己随便定义的吗？还是有一定规范

现在PSD设计稿的大小是375px,
比如设计稿里有块宽度是300px,那我在css里的width是不是就写（300除以16）rem的值，

然后所有用到px的地方都换算成rem.

这就是rem的用法吗？

Answer 1

rem」是指根元素（root element，html）的字体大小，即rem永远是基于根元素设置字体的大小来改变元素的字体大小。现代手机浏览器默认字体大小是16px，所以网上很多答案说给根元素设定字体大小为62.5%，即10/16=0.625，即根元素的字体大小为10px。这样给div设定字体大小即可以设定
{font-size : 1.4rem}，但是会发现字体大小在屏幕上并没有动态的发生变化。因为在所有手机屏幕上字体默认大小都是16px，而设置1.4rem在所有手机上的大小都为：1.4 * 10px =14px，在所有手机上并没有变化。这个大概就是你的疑惑也是我之前的疑惑。

之后，看了很多资料，我们少了一个最重要的一个步骤，即我们需要根据屏幕宽度动态设定根元素的字体大小，这样在字体才会根据屏幕的大小变大和变小。

假设以iPhone6屏幕为主，屏幕宽度为375，首先我们需要用js获取屏幕的宽度，然后以屏幕宽度除以375，这个值代表1px在不同屏幕上所占的比例，再乘以10，用这个值设置html的字体大小，这样这个值在6的屏幕是10px，而在5的屏幕为8.53px，在6p上为11.04px，这样你设置

div{font-size : 1.4rem} //在5上字体大小：1.4*8.53 = 11.94px,在6上：1.4 * 10 = 14px,
//在6p上：1.4 * 11.04 = 15.456px

这样即可以完美使适应不同屏幕的不同字体大小，这才是rem的正确用法。
ps : 由于在chrome上面不能识别12px以下的字体，所以你设置根元素为10px在chrome并不能完美识别，会发现1rem最小高度是12px，所以建议可以以20px或者10px为基准，我们现在项目以100px为基准。
ps:楼上有另一种实现rem，没试过，可以去尝试下。
附设置rem字体大小的js:

function setRemFontSize() {
        let doc = document.documentElement
        doc.style.fontSize=doc.clientWidth/375 * 100 +'px';
    }

Answer 2

你可以给html{font-size:62.5%;}这样你的rem和px之间的比例就是1:1；方便开发。rem是一种类似于响应式布局的单位，他可以跟随屏幕的宽度去自适应。

Answer 3

https://github.com/amfe/lib-f...

这么说吧，你psd现在是375px，有一块300px的div，那么 现在375px假如25等分，那么一等份就是15px。300px就是20份（300/15）

这里呢15px就类似于html font-size:15px,而300px对应的rem就是20rem.

rem的方案在不同手机（不同宽度）下，font-size都是动态去设置的。

Answer 4

媒体查询(基于屏幕宽度调整)

• 小于360时；可以设置font-size:10px;这样比较好换算。

• 360到415时；font-size:12px;

• 大于415时；font-size:15px;

• 备注：基于320的屏幕开发

reset.js (基于实时计算换算：1rem=100px)

• 网易天猫是这样处理的

"use strict";

    win.resize = {};

    var timer = null;
    var rem = 12;
    var doc = win.document;
    var docEl = doc.documentElement;

    /**
     * 刷新页面REM值
     */
    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        width = width > 768 ? 640 : width;
        rem = width / 7.5;
        docEl.style.fontSize = rem + 'px';
    }

    /**
     * 页面缩放或重载时刷新REM
     */
    win.addEventListener('resize', function () {
        clearTimeout(timer);
        timer = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener('pageshow', function (e) {
        if (e.persisted) {
            clearTimeout(timer);
            timer = setTimeout(refreshRem, 300);
        }
    }, false);
    
    refreshRem();

• 备注：我们基于750的设计稿开发。（换算1rem=100px）

Answer 5

同志们，用js算rem已经过时啦。

html{
    font-size:calc(100vw/7.5);
}

Answer 6

看了很多遍一楼的答案，终于明白了答主的意思，简单来说就是，通过百分比来设置根节点的font-size得出的结果都是一样的，因为现代手机浏览器默认字体大小都是16px;那拿一个固定的百分比乘以一个固定的数得出的永远是一个固定的值，所以！要通过获取当前屏幕宽度来动态改变根元素的字体大小，鼓掌！