原创 Danta 2025-02-07 08:31 重庆
点击关注公众号，“技术干货” 及时达！
前言
萝卜青菜，各有所爱；正如我们对于手机的选择一样，每个人都有自己偏好的品牌和型号，而这些设备的屏幕大小也千差万别。面对如此多样化的终端环境，如果一个H5页面仅仅针对某一特定尺寸的手机进行设计，那么当其他用户尝试访问时，可能会遇到布局错乱、元素显示不全等问题，极大地影响了用户体验。
在这样的背景下，如何设计出能够完美适配所有屏幕的H5页面，成为了开发者们亟需解决的重要课题。想象一下，无论用户使用的是小巧玲珑的智能手机，还是大屏平板电脑，您的页面都能自动调整至最佳状态，提供一致且优质的浏览体验——这不仅是技术上的挑战，更是为每一个用户提供个性化服务的关键所在。
在这篇文章中，我们来看看如何实现根据手机屏幕大小调节我们的H5页面。
从px到rem的转变
当我们使用px时
「px (Pixels)」 :
px是绝对单位，它代表屏幕上的物理像素点。每个px值对应屏幕上一个固定的点，不受其他因素影响。
使用px时，元素的尺寸是固定的，不会随父元素或根元素的变化而变化。
案例：
<!DOCTYPE html><html lang="en" ><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title></head><body><div><div style="height: 100px; width: 100px; background-color: red; display: inline-block;" ></div><div style="height: 200px; width: 200px; background-color: green; display: inline-block;"></div><div style="height: 200px; width: 200px; background-color: green;display: inline-block;"></div></div></body></html>
第一个<div>：设置了固定的高度和宽度（100px x 100px），背景色为红色，并且通过display: inline-block;使其与其他元素在同一行显示。
第二个和第三个<div>：两者都设置了200px x 200px的尺寸，背景色为绿色，同样使用了display: inline-block;来保持在同一行。
效果：
我们来看看使用px在不同手机上的展示成果如何？
「步骤为：」 右键浏览器 -> 点击检查 -> 点击切换仿真设备， 这样就可以，看看在不同的手机所展示的页面效果
最终：
我们可以看到使用px设计页面，缺点就是在不同的屏幕中，你所设计的页面在不同的手机中展示不同，因为px是绝对单位，并不会随着你手机屏幕的大小而调节，那么我们就要使用rem
我们来使用rem
「rem (Root em)」 :
rem是相对单位，基于HTML文档根元素（即<html>标签）的字体大小（默认情况下为16px）。例如，1rem等于根元素的font-size。
「调整默认字体大小，如 ：」
<html lang="en" style="font-size: 75px;">使用rem时，元素的尺寸是相对于根元素的字体大小来计算的。如果根元素的font-size发生变化，则所有以rem为单位的尺寸也会相应调整。
设计合适的字体大小：
那么我们就可以根据手机屏幕的大小，然后调节默认字体大小，这样就能保证特定的rem所占据的位置，在不同的手机中一样。
案例：
「iphone SE」 是手机页面的模板，我们先拿它开刀，它的屏幕大小是「375*667」,那么 如果10rem为屏幕宽度，默认字体大小就要设计成「375/10 = 37.5px」
<!DOCTYPE html><html lang="en" style="font-size: 37.5px;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>* {margin: 0;padding: 0;}</style></head><body><div style="width: 5rem; height: 2rem;background-color: red;display:inline-block;"></div><div style="width: 5rem; height: 2rem;background-color: green;display:inline-block;"></div></body></html>
结果：我们实现了两个色块的并排
由于<html>标签设置了font-size: 37.5px;，所以1rem等于37.5px。因此，这两个<div>的实际宽度是5 * 37.5px = 187.5px，高度是2 * 37.5px = 75px。
「重置样式」：使用了通配符选择器*来移除所有元素的默认内外边距，，可以避免不必要的布局问题
需要注意 两个div需要头尾相接，隔开了默认会换行，无法实现并排效果。
这时候长的帅的读者肯定要问了，你也就是实现了「iPhoneSE」的屏幕呀，那我要是切个别的手机呢？这时候就要来到了「响应式设计」了。
响应式设计：
以上我们实现了iPhoneSE的屏幕中两个色块的并排，那么是在我们知道该屏幕的大小，然后计算出默认的字体大小，从而设计的，想想能否把这些封装成函数，一步到位！
案例：
<!DOCTYPE html><html lang="en" style="font-size: 75px;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><script>// 阻塞 来动态设置 html 的 font-size// 立即执行函数(function() {// console.log('立即执行函数')function calc() {const w = document.documentElement.clientWidth;console.log(w);document.documentElement.style.fontSize= 75*(w / 750) + 'px';console.log( document.documentElement.style.fontSize );}calc()})()</script><style>*{margin:0;padding:0;}</style></head><body><div><div style="width: 5rem; height: 2rem;background-color: green;display:inline-block;" ></div><div style="width: 5rem; height: 2rem;background-color: blue;display:inline-block;"></div></div></body></html>
效果：
分析：
我们重点来讲讲新添加的部分，也就是「JS」中的
「匿名函数声明」：
(function() { ... })：这里定义了一个匿名函数，并通过包裹在圆括号中形成一个表达式。这允许我们在这个表达式的末尾添加一对圆括号()来立即调用这个函数。
「内部函数 calc」：
function calc() { ... }：定义了一个名为calc的函数，该函数负责计算并设置根元素（<html>）的字体大小。
「获取视口宽度」：
const w = document.documentElement.clientWidth;：获取当前文档视口（viewport）的宽度，并存储在变量w中。clientWidth属性返回的是元素的内容区宽度（不包括边框、滚动条和外边距），以像素为单位。
「动态调整字体大小」：
document.documentElement.style.fontSize = 75 * (w / 750) + 'px';：根据视口宽度w按比例调整根元素的字体大小。这里的逻辑是假设设计稿宽度为750px时，字体大小应为75px；当实际视口宽度变化时，字体大小会相应地按比例缩放。例如，如果屏幕宽度是375px，则font-size将会是37.5px（75 * (375 / 750)）。
「输出调试信息」：
console.log(w); 和 console.log(document.documentElement.style.fontSize);：这两个语句用于将视口宽度和计算后的字体大小打印到浏览器的控制台，方便开发者进行调试。
「调用 calc 函数」：
calc();：调用了calc函数，从而执行了字体大小的计算和设置。
「立即执行」：
最后的一对圆括号()表示立即执行前面定义的匿名函数，确保calc函数在页面加载时被调用。
「如此一来，我们的页面就能在不同手机中展示相同的效果了」
那么看完效果图，大家有没有发现有需要改进的地方，每次换个手机尺寸都要重新刷新一次，就很麻烦，所以我们就得想想怎么去优化。
改进一下：
「效果：」
代码：
<!DOCTYPE html><html lang="en" style="font-size: 75px;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><script>// 阻塞 来动态设置 html 的 font-size// 立即执行函数(function() {// console.log('立即执行函数')function calc() {const w = document.documentElement.clientWidth;console.log(w);document.documentElement.style.fontSize= 75*(w / 750) + 'px';console.log( document.documentElement.style.fontSize );}calc()// 竖屏 横屏 屏幕大小发生变化window.onresize=function(){console.log('屏幕大小发生变化')calc()}})()</script><style>*{margin:0;padding:0;}</style></head><body><div><div style="width: 5rem; height: 2rem;background-color: green;display:inline-block;" ></div><div style="width: 5rem; height: 2rem;background-color: blue;display:inline-block;"></div></div></body></html>
新增功能：响应窗口大小变化：
window.onresize = function() {console.log('屏幕大小发生变化');calc();};
「window.onresize事件监听器」：
这段代码为window对象的onresize属性赋值了一个匿名函数。每当浏览器窗口的大小发生变化（例如用户调整了浏览器窗口大小或者移动设备改变了方向），这个匿名函数就会被触发。
「输出调试信息」：
console.log('屏幕大小发生变化');：当窗口大小发生变化时，在控制台打印一条消息，用于调试目的，告知开发者窗口大小已改变。
「调用calc函数」：
calc();：在窗口大小发生变化时重新计算并设置根元素（<html>）的字体大小。这意味着无论何时窗口尺寸改变，页面上的所有基于rem单位的元素都会相应地调整其大小，以保持布局的一致性和可读性。
总结
面对多样化的终端设备和屏幕尺寸，从传统的使用px（像素）作为固定单位进行页面布局的方法已经不能满足需求。为了解决不同设备上显示效果不一致的问题，我们可以转向了更加灵活的相对单位rem（基于根元素<html>的字体大小），并结合JavaScript动态调整根元素的font-size，以实现真正的响应式设计。
点击关注公众号，“技术干货” 及时达！
