[JavaScript知识库] font-size有关rem的适配 -无需使用JavaScript代码进行多设备的适配

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> font-size有关rem的适配 -无需使用JavaScript代码进行多设备的适配 -> 正文阅读

[JavaScript知识库]font-size有关rem的适配 -无需使用JavaScript代码进行多设备的适配

面对不同设备的适配与响应；这里介绍不同的是@media规则进行匹配不同的设备；

不同的设备宽度不尽相同，尺寸有320px,360px,375px,414px…等常见的宽度,面对在不同的尺寸环境下，文字的阅读体验问题，我们常常使用的是CSS单位 - rem；
*其中“r“代表的是root的意思，在HTML网页中，root指的就是<html>元素，正如CSS伪类:root的目标元素和html属性选择器一样；*例如：

html {
	font-size: 16px; // 1rem = 16px
}

使用rem的基础，可衍生出下面的俩种方法
（1）. 可使用@media设定临界点，来设置字号,代码如下：

html {
	font-size: 16px;
}
@media (min-width: 414px) {
	html {
		font-size: 18px;
	}
}
@media (min-width: 600px) {
	html {
		font-size: 20px;
	}
}

（2）.头部嵌入javaScript代码，根据屏幕尺寸设置对应的根字号大小；

document.documentElement.style.width = document.documentElement.clientWidth / 7.5 + 'px';

社区的相对单位

vw 社区宽度百分值
vh 社区高度的百分值

calc()函数下的最佳实践

结合vw单位与calc()函数进行计算，无需使用任何的JavaScript代码，可实现基于设备宽度的移动端布局；代码如下：

html {
	font-size: 16px;
}
@media (min-width: 375px) {
	html {
		/* 375px作为16px的基准,414px宽度时正好对应18px的根字号大小 */
		font-size: calc(16px + 2 * (100vw - 375px) / 39);
	}
}
// 如果设备是414px， 100vw == 414px；根字号为18px
@media (min-width: 414px) {
	html {
		/* 414px作为18px的基准,根字号大小累加增加4px （18px - 22px） */
		font-size: calc(18px + 4 * (100vw - 414px) / 586);
	}
}
@media (min-width: 1000px) {
	html {
		/* 屏幕宽度从1000px往后每增加100px，根字号大小就增加0.5px */
		font-size: calc(22px + 5 * (100vw - 1000px) / 1000);
	}
}