该代码示例展示了如何使用JavaScript动态计算HTML的font-size属性，以实现基于rem的响应式布局。当设备宽度变化时，函数auto()会根据屏幕宽度与设计稿比例调整字体基础值，确保在不同设备上元素尺寸相对一致。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 封装一个函数
function auto() {
/*
1、获取当前屏幕的宽度
2、获取当前屏幕下html元素的字体大小
3、赋值
预设字体基础值1rem=100px
*/
// 获取当前屏幕的宽度
var devicewidth = document.documentElement.clientWidth;
// psd设计稿的宽度为750px
var desw = 750;
// 手机屏幕 大于 设计稿件 ，就按照1:1的大小去制作
if (devicewidth > desw) {
devicewidth = desw;
}
// 获取当前屏幕宽度字体的基础值
var currFontSize = (devicewidth * 100) / desw;
// 赋值 html标签设置font-size
document.documentElement.style.fontSize = currFontSize + "px";
// 表示html
console.log(document.documentElement);
console.log(devicewidth);
console.log(currFontSize);
}
// 调用
auto();
// 只要屏幕的宽度改变就调用auto函数
window.onresize = function(){
auto();
}
</script>
<style>
.wrap{
width: 3rem;
height: 2rem;
background-color: red;
}
/*
px-to-rem插件： 选中要换算的代码：alt+z
*/
.box{
width: 3.5rem;
height: 100px;
}
</style>
</head>
<body>
<!-- rem布局 -->
<!--
1、设置页面的viewport
2、动态计算并且设置不同尺寸的html的font-size属性
3、
-->
<div class="wrap"></div>
</body>
</html>
扫一扫
5669
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
