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

问题描述

问 题

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

根目录html设置一个font-size

html{ font-size: 16px; }

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

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

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

这就是rem的用法吗？

解决方案

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

这篇关于javascript - 移动端Rem单位的具体用法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！