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

最新推荐文章于 2024-03-13 17:37:22 发布

wendyTan10

最新推荐文章于 2024-03-13 17:37:22 发布

阅读量2k

点赞数 1

分类专栏：设备兼容与分辨率文章标签： class css3

本文链接：https://blog.csdn.net/weixin_42369598/article/details/123848022

版权

设备兼容与分辨率专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何利用CSS的rem单位和@media查询来实现不同设备的响应式布局，确保文字阅读体验。通过设置不同宽度阈值下的根字体大小，以及结合vw单位与calc()函数，可以动态调整字号，适应多种屏幕尺寸。同时，讨论了rem单位可能存在的渲染问题，并提供了相应的解决策略。

摘要由CSDN通过智能技术生成

面对不同设备的适配与响应；这里介绍不同的是@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);
	}
}