引言
作为一个前端程序员不知道你有没有想过这么一个问题，现在的手机屏幕大小怎么多，难道页面的设计稿也画这么多种嘛？或者就一张设计稿，那写出来的页面在不同的手机屏幕上出现布局混乱，页面显示错误怎么办！这极大的影响了用户的体验。那有没有什么办法解决这个问题呢？
案例引入
js
<!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: chartreuse;display: inline-block;" ></div>
<div style="height: 100px;width: 100px; background-color: chartreuse;display: inline-block;" ></div>
<div style="height: 200px;width: 200px;background-color: red;display: inline-block;"></div>
</div>
</body>
</html>代码解析 在这段代码中设置了三个div元素： 第一个和第二个子级div元素的样式相同，高度和宽度都是100像素，背景颜色是黄绿色并且它们都以内联块级（inline-block）的方式显示。这意味着它们会在同一行内显示，并且会根据内容自动调整宽度。
第三个子级div元素的样式与前两个不同，它的高度和宽度都是200像素，背景颜色是红色,并且也以内联块级的方式显示。这意味着它会在同一行内显示，但是由于它的尺寸更大，可能会占据更多的空间。 效果 让我们来看一下它在不同手机上的显示效果吧！
我们可以看到这样在不同的手机上的显示效果差别很大，这对一些页面的展示影响很大？ 这是因为在上面的html结构中我们使用的是
px作为单位定义长度和大小
px（像素）
- 绝对单位 ：
px是基于屏幕分辨率的绝对单位，每个像素代表屏幕上的一点。 - 固定大小 ：使用
px定义的尺寸在所有设备上都是固定的，不会根据父元素或根元素的变化而改变。 - 精确控制 ：由于其绝对性，
px提供了非常精确的尺寸控制，适合需要严格布局的情况。 - 缺乏灵活性 ：在响应式设计中，
px的固定性质可能会限制页面元素根据屏幕大小自动调整的能力。
从上面的实例中我们可以看出- px 的局限性 ：在移动设备或其他小屏幕设备上，px 可能会导致元素过大或过小，从而破坏用户体验。此外，在处理高分辨率屏幕时，px 可能不够灵活。那有没有什么其他的方法解决这个问题呢？
响应式设计
什么是响应式设计
响应式设计（Responsive Design）是一种网页设计和开发的方法，它使得网站能够在不同尺寸的屏幕上提供良好的用户体验。响应式设计的核心理念是创建一个可以自动调整布局、字体大小和其他视觉元素以适应用户设备屏幕大小和方向的页面。
在响应式设计中我们使用rem作为单位定义长度和大小
rem（根 em）
- 相对单位 ：
rem是相对于 HTML 文档根元素 (<html>) 的字体大小来计算的。这意味着它的值会根据<html>元素的font-size动态变化。 - 全局缩放 ：通过调整
<html>的font-size，可以轻松地对整个页面进行比例缩放，这对于响应式设计非常有用。 - 一致性：确保页面各部分之间的比例关系一致，不会因为使用了不同的绝对单位而导致失衡。
- 易于维护 ：只需要修改一次根元素的
font-size，就能影响到所有使用rem的元素，减少了重复设置的工作量。
我们知道标准的页面设计稿是根据苹果手机的750px作为标准大小的 那么我们一般将font-size =75px就行了，这样10rem=750px了这样方便计算
示例
假设你有一个段落元素，并且你想设置它的字体大小为 2rem：
css
<html lang="en" style="font-size:75px;">
<body>
<p style="font-size:2rem;">这是一个段落。</p>
</body>
</html>嗯？但这和用px有什么区别呢？对于不同大小的屏幕不还是要手动设置不同的font-size嘛？
哎这这时候我们可以使用DOM编程实现动态设置font-size
javascript
(function(){
function calc(){
const w=document.documentElement.clientWidth;
console.log(w);
document.documentElement.style.fontSize=75*(w/750)+'px';
}
calc()
// 监听屏幕变化
window.onresize=function(){
calc()
}
})()这段代码是一个自执行的JavaScript函数，用于动态调整网页的字体大小，以适应不同设备的屏幕尺寸。以下是代码的逐行解释：
(function(){ ... })();：这是一个立即执行函数表达式（IIFE），它创建了一个匿名函数并立即执行它。function calc(){ ... }：定义了一个名为calc的函数，用于计算并设置字体大小。const w=document.documentElement.clientWidth;：获取当前视口的宽度，并将其存储在常量w中。console.log(w);：在控制台中打印当前视口的宽度。document.documentElement.style.fontSize=75*(w/750)+'px';：计算字体大小。这里假设基础宽度为750像素，字体大小为75像素。如果视口宽度是750像素，字体大小就是75像素。如果视口宽度变化，字体大小会按比例变化。calc()：调用calc函数，立即执行一次，以设置初始字体大小。window.onresize=function(){ ... }：为window对象添加一个onresize事件监听器，当窗口大小变化时，会触发这个函数。calc()：在onresize事件监听器中再次调用calc函数，以更新字体大小。
来，看效果
xml
<!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>
</head>
<body>
<script>
(function(){
function calc(){
const w=document.documentElement.clientWidth;
console.log(w);
document.documentElement.style.fontSize=75*(w/750)+'px';
}
calc()
// 监听屏幕变化
window.onresize=function(){
calc()
}
})()
</script>
<style>
*{
margin: 0;
padding: 0;
}
</style>
<div>
<div style="height:5rem;width: 5rem; background-color: chartreuse;display: inline-block;" ></div><div style="height:5rem;width: 5rem; background-color: chartreuse;display: inline-block;" ></div>
<div style="height:10rem;width: 10rem;background-color: red;display: inline-block;"></div>
</div>
</body>
</html>嘿嘿，现在是不是实现了不管在多大的屏幕下显示都是一样的效果。
总结
通过以上步骤，你可以高效地将设计稿转化为高质量的 H5 页面。重点在于先构建良好的 HTML 结构，然后精心设计 CSS 样式，并利用相对单位 rem 实现响应式适配。希望这篇文章对你有所帮助！如果你有任何问题或需要进一步的帮助，请随时留言讨论。
点赞，收藏支持一下吧集美们！