你真的会用css3的rem吗?

时间:2022-06-26
本文章向大家介绍你真的会用css3的rem吗?,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

之前做移动端开发的时候,都是用rem对DOM元素进行大小设置的。每次用的时候都是去网上搜,然后copy到自己的项目中,没有真正理解网友的代码含义。这次终于认真的学习了一下。

提到rem ,我们必须要先来看看px、em

px:是一个虚拟像素,浏览器中一切长度都是以css像素为单位的。由于不同的物理设备的物理像素的大小是不一样的,所以css认为浏览器应该对css中的像素进行调节,使得浏览器中1css像素的大小在不同设备上看上去大小总是差不多。css规范中使用“参考像素”进行换算。1参考像素即为一臂之遥看解析度为96dpi的设备输出时,1点的视角。(dpi:每英寸多少个物理像素),实际是从一臂之遥看解析度为96dpi的设备输出一单位时视线与水平线夹角;

上图表示pc的典型视觉距离是71厘米即28英寸,则1px对应了0.28mm;42寸高清电视的典型视距距离是3.5m,其1px对应1.3mm;由此看见参考像素是一个visual angel,当设备的典型观看距离越远时,参考像素就越大。

还有,css中的px和物理像素可不一样哦。设备的分辨率越高,css中1px代表的物理像素就越多。因为分辨率增大了,但是屏幕尺寸并没有增大,必须让1px代表更多的物理像素,才能让1px的东西在屏幕的大小与低分辨率的设备差不多。所以可以说px是一个固定的长度。

em:相对长度单位。相对于父元素的font-size。

rem: css3新出的相对长度单位,相对于根元素(html)的字体的大小。

rem存在的意义

  • px是一个固定死的长度,;
  • em是相对父元素的font-size的相对长度单位,如果不小心中间环节出现问题,那么出错的节点的所以后代的大小都会出现问题,所以风险是及高的;
  • rem是相对根元素html的font-size的相对长度单位,避免了em像素的父节点的追溯。我们可以根据不同的情况设置html不同的font-size大小。

rem的使用

首先我们要加入这个标签:

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

具体意思如下:

initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例

然后再设置html的font-size:

// resize 窗口大小发生改变的时候才会触发的,第一次加载时不会触发
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
// 手机屏幕是否反转orientationchange
window.addEventListener(resizeEvt, setFontSize, false);// IE 谷歌
document.addEventListener('DOMContentLoaded', setFontSize, false);//火狐
function setFontSize(){
  var cWidth=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
  var basicNum = 200;
  var htmlFontSize=basicNum*(cWidth/设计稿宽度);
  document.documentElement.style.fontSize=htmlFontSize+'px';
}

一般设计稿的宽度是750,在开发过程中我们以iphone6/7/8为基准,那么html的font-size算出来应该是200*(375/750)=100px;所以若在设计稿中有一个width为200px的box。我们需要设置为他的宽为(200/100)rem;所以这就是我建议basicNum设置为200的原因,因为这样算的话简单。

var htmlFontSize=basicNum*(cWidth/设计稿宽度);

可以看出,屏幕尺寸越宽,根html的font-size越大。由于其他元素都是

以它为依据的所以能够达到自适应。

愿我们有能力不向生活缴械投降---Lin