有关使用rem单位的两个进阶问题 rem单位怎么使用

bigegpt 2024-11-09 11:05 4 浏览

点击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

Rem单位，大家现在都很熟悉，一个基于根元素（html）font-size值大小进行动态变化的单位。那么，我们知道有两种方式可以动态修改根元素的font-size值，一种通过@media给不同的机型设定根元素的字体大小，另一种是通过JavaScript获取屏幕的宽度，然后来修改根元素的字体大小，这第二种方式有一个基准值的问题。所以这篇我们来讲一下包括基准值在内的两个有关REM的进阶问题。

一、基准值

视频里，我讲过下面这段代码。

let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
let htmlDom = document.getElementsByTagName('html')[0]
htmlDom.style.fontSize = htmlWidth / 10 + 'px'

上面这段代码是通过动态获取屏幕宽度，然后根据给定的基准值来改变根元素的字体大小。

那么，这里有个问题，这个基准值是否可以用其它的值？答案是可以的，比如20，那么在屏幕为320的场景，这个根元素字体大小就是16px，那么10rem就是160px。但是，这个基准值又不能取太大，比如取200，那么在屏幕为320的场景下，这个根元素字体大小就是1.6px。这样的值太小，浏览器无法识别，所以我们通常取10px。

二、如何借助SASS来处理数值转换

第二个问题就是，在做项目的时候，如果每写一个单位我们都通过手动换算，在写到代码中，那就有点效率太低了，不像我们的作风，所以，这里可以借助sass来处理。如下代码

在SASS文件里先定义一个转换函数。

@function px2rem($px) {
 $rem : 37.5px;
 @return ($px / $rem) + rem; 
}

在SASS文件里引用这个函数

.hello{
 width:px2rem(100px);
 height:px2rem(100px);
 $.b {
 width:px2rem(50px);
 height:px2rem(50px);
 }
}

就是这样的，在实际的代码中，我们直接引用这个转换函数就行。

三、总结一下

关于REM之前发过两个视频，文章的内容就先说到这里，接下来我可以在用实际的项目来实战一下REM是如何做适配的。

js获取屏幕宽高

上一篇：用js实现图片放大镜用js实现图片放大镜的方法
下一篇：JavaScript实现页面到滚动到指定位置执行某些操作

有关使用rem单位的两个进阶问题 rem单位怎么使用

一、基准值

二、如何借助SASS来处理数值转换

相关推荐

idea本地配置连接远程hadoop集群的一些网络问题解决汇总

无缓存不行?例行升级的入门级阿斯加特AN2 SSD装机点评

Ceph运维手册(基于P版本)

大数据开发前要做什么准备?8台Hadoop服务器进行集群规划前配置

Tensorflow分类loss函数总结 tensorflow绘制loss曲线

R语言学习笔记(七) -离散型数据的模型预测2

iOS Runtime详解

7 个对 Java 意义重大的性能指标，你知道几个?

PHP 远程调试最佳实践

Laravel框架使用图片处理简单教程