移动端适配之动态 rem 方案

最新推荐文章于 2025-03-18 10:01:15 发布

Ashy-

最新推荐文章于 2025-03-18 10:01:15 发布

阅读量746

点赞数 1

分类专栏：用户体验极佳 js实用经验文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/weixin_43794299/article/details/129331112

版权

用户体验极佳同时被 2 个专栏收录

5 篇文章

订阅专栏

js实用经验

5 篇文章

订阅专栏

代码示例展示了如何通过JavaScript动态设置HTML文档的字体大小，基于屏幕宽度与设计图尺寸的比例，确保在不同设备上1rem对应的实际像素不同，从而实现内容的自适应布局。这种方法保证了文字在不同屏幕尺寸下都能保持合适的大小，避免在小屏设备上文字过小的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码

就是设置浏览器字体，从而实现根据屏幕动态计算大小

<script>
	const WIDTH = 750;	// 设计图尺寸
	const setView = () => {
		document.documentElement.style.fontSize = screen.width / WIDTH + "px";
	};
    window.onorientationchange = setView;
    setView();
</script>

在使用时，1rem 即 1px，然后在不同窗口尺寸下的内容也是自适应的。另外有一个好处是，文字大小不会随着屏幕变的非常小。

示例

iphone SE（小屏）

这里我的比例是 1:10（即 1rem === 10px）

在计算样式时，宽高则是 165 * 110

iphone 12 （中等屏幕）

样式计算得到的宽高也会等比增大

三星 S22U（大屏）

将近 420宽度

ipaid Air（超大屏）

宽高分别为 360+ / 240+

关于文字大小

这里因为是动态 rem，文字在小屏中不会出现绝对的按比例放大缩小的情况，可以从效果图中看出文字基本都是适配的。