rem设置方法、基准值技巧以及浏览器兼容

hwJw19 发表于 2021/06/16 10:12:32 2021/06/16
【摘要】 一、介绍rem是CSS3中新增的度量单位,全称是“ font size of the root element”,翻译过来是根元素字体大小,所以它其实是一个相对于html的相对单位。二、适用场景主要用于做移动端屏幕适配,因为不同手机型号的屏幕大小不同,如果我们在写移动端页面的时候,再使用px,就不合适了,因为同样的100px,在大屏幕或者分辨率高的屏幕上,可能只会占据一小部分,但在小屏上,可...

一、介绍

remCSS3中新增的度量单位,全称是“ font size of the root element”,翻译过来是根元素字体大小,所以它其实是一个相对于html的相对单位。

二、适用场景

主要用于做移动端屏幕适配,因为不同手机型号的屏幕大小不同,如果我们在写移动端页面的时候,再使用px,就不合适了,因为同样的100px,在大屏幕或者分辨率高的屏幕上,可能只会占据一小部分,但在小屏上,可能就会占据一大部分。

iphone6

iphone6 plus

从上面的例子我们可以看出,同样的200px,在不同的设备上的区别。

三、设置方法

//字体适配
(function(win) {
	var doc = win.document;
	var docEl = doc.documentElement;
	var tid;

	function refreshRem() {
		var width = docEl.getBoundingClientRect().width;
		// console.log(width)
		if (width > 1200) { // 最大宽度
			width = 1200;
		}
		var rem = width / 12;
		docEl.style.fontSize = rem + 'px';

	}
	win.addEventListener('resize', function() {
		clearTimeout(tid);
		tid = setTimeout(refreshRem, 10);
	}, false);
	refreshRem();
})(window);

设置方法其实很简单,js获取屏幕宽度,然后经过计算,将计算后的值赋值给html根元素的font-size即可。

四、技巧及兼容

这里需要说到一个小技巧,就是这个计算后的值,最好设置一个大一些的整数,比如说你的设计稿如果是375宽的,那最好设置为375/3.75,这样1rem375宽的屏,就是100px,设置成整数的好处是,pxrem之间好换算,设置大一点的值是因为,在移动设备上,也有跟Chrome一样的对于根字体大小的限制问题,Chrome最小字体是10px,部分移动设备,也会设置最小字体,比如华为Mate30,它的微信内置浏览器的最小字体是8px

如上图,我设置的根字体是3px,而移动设备默认最小字体是8px,我写的样式,在这台设备上渲染页面就会出现问题,解决方案就是把根字体设置的大一些,就好啦,亲身踩坑哦~

对于现在一部分2K的笔记本屏幕,win10的显示设置里,通常会推荐你将缩放与布局设置成150%,这个时候获取屏幕像素比,就会是1.5。

当你这样设置的时候,你写的10px,在笔记本上看到的就是15px,如果希望看到设置的是10px,看到的也是10px,可以在设置根字体的时候,加上这样的一段代码:

(function(win) {
	var doc = win.document;
	var docEl = doc.documentElement;
	var tid;

	function refreshRem() {
		var width = docEl.getBoundingClientRect().width;
		// console.log(width)
		if (width > 1200) { // 最大宽度
			width = 1200;
		}
		var rem = width / 12;

		//判断PC端屏幕是否为进行缩放
		var u = navigator.userAgent;
		if (u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 || u.indexOf('iPhone') > -1 || u
			.indexOf('iPad') > -1 ||
			u.indexOf('iPod') > -1 || u.indexOf('iOS') > -1) {
			//移动端
		} else {
			//屏幕像素比
			var pixelPatio = 1 / window.devicePixelRatio;
			rem = rem * pixelPatio;
		}
		//1rem = 100px
		docEl.style.fontSize = rem + 'px';

	}
	win.addEventListener('resize', function() {
		clearTimeout(tid);
		tid = setTimeout(refreshRem, 10);
	}, false);
	refreshRem();
})(window);

限制一下屏幕的像素比就可以啦~

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:cloudbbs@huaweicloud.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。