这个博客展示了如何根据浏览器的基础字体大小和设计稿尺寸，使用JavaScript动态计算并设置页面根节点的字体大小，从而实现页面元素尺寸的缩放。在窗口大小改变时，会自动更新根节点的字体大小，以保持页面布局的响应式效果。
<html>
<head>
<title>Rem页面缩放案例</title>
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=10,user-scalable=no" />
</head>
<script>
/**
* 根据基础字体大小 和 效果图宽度设置 根节点字体大小
* @param baseFontSize 浏览器默认字体大小 [注]浏览器最小字体为12像素，所以该值必需大于等于12
* @param baseWidth 设计稿的尺寸
*/
<
<head>
<title>Rem页面缩放案例</title>
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=10,user-scalable=no" />
</head>
<script>
/**
* 根据基础字体大小 和 效果图宽度设置 根节点字体大小
* @param baseFontSize 浏览器默认字体大小 [注]浏览器最小字体为12像素，所以该值必需大于等于12
* @param baseWidth 设计稿的尺寸
*/
<
最低0.47元/天 解锁文章
扫一扫
2946
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
