h5适配方案（h5响应式布局、PC和移动端适配方案）

时间2025-06-20 14:57:56分类IT科技浏览4564

导读：前言春招真的是太卷了，让我怀疑春招到底在招谁（是我太菜惹qaq）。总之还是不能松懈下来，总结一下在实习期间遇到的h5的响应式布局、PC和移动端适配方案的选择以及一些问题。本文部分文案由chat-gpt编写，例如介绍响应式布局的文案（才不是因为我懒~）。...

前言

春招真的是太卷了，让我怀疑春招到底在招谁（是我太菜惹qaq）。总之还是不能松懈下来，总结一下在实习期间遇到的h5的响应式布局、PC和移动端适配方案的选择以及一些问题。本文部分文案由chat-gpt编写，例如介绍响应式布局的文案（才不是因为我懒~）。

响应式布局

响应式布局是指在不同的设备或屏幕大小下，网页能够自动适配并呈现出最佳的视觉效果和用户体验。这是一种以屏幕大小和设备特性为基础的设计方法，旨在确保网站能够在各种不同设备上都能够完美呈现。这样，无论是在大屏幕电脑、笔记本电脑、平板电脑还是手机上访问网站都能够得到良好的体验。

总结了一下，网上目前有以下几种方案：媒体查询 flex布局 rem 百分比 vw/vh 移动端 viewport 开发PC端和移动端两套页面

在实习的时候我做过两个项目，是使用了媒体查询和rem的，效果还可以，我会着重介绍这两个方案。

@media媒体查询

关于媒体查询的详细介绍和使用方法：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries

讲大白话就是在符合条件的情况下，特定的样式会生效，下面是一个例子： .test { width: 80px; height: 80px; background: #ccc; } @media screen and (min-width:600px){ .test { width: 100px; height: 100px; } }

这个效果就是在屏幕宽度小于600px的时候，test类中的高度和宽度都是80px ，而在大于等于600px的时候变成了100px ，注意这里背景颜色还是原来的灰色，样式只是叠加了，并不是直接替换掉。

看到这里你应该就懂了，电脑、平板和手机各写一套不就行了，确实如此，这么做可以满足大部分的用户。

但也有许多问题，比如写三套就够折磨人了，而且由于市面上手机、电脑和平板屏幕宽度都不太一样，写三套只能满足大部分的用户，一些用户屏幕尺寸比较刁钻的（例如尺寸在手机和平板分割点边缘的），显示的效果就不是很好了。

flex布局

flex布局是一种CSS 3的新的布局方式，可以轻松的实现弹性布局。它的主要思想是通过容器和子项之间的关系来实现网页布局。和传统的布局方式相比，flex布局有很多优点，比如可以快速设置元素的大小、位置、对齐等属性，还可以自适应不同尺寸的屏幕和设备，从而实现更好的响应式布局。

使用flex布局，需要对容器设置display: flex属性。

然后使用flex-direction属性来设置子项的方向（水平或垂直）。flex-wrap属性则用于控制子项是否可以换行，align-items属性用于控制子项在交叉轴上的对齐方式，justify-content属性用于控制子项在主轴上的对齐方式。通过这些属性的设置，我们可以轻松的实现各种布局效果，同时也可以在响应式布局中实现更好的适应性。

个人感觉flex布局比较适合一些页面比较简单的页面，在PC和移动端都有不错的体验。

rem

rem布局是一种响应式布局方式，用于将屏幕尺寸和设备DPI等因素考虑在内，让页面能够在不同的设备上自适应调整布局，在各种尺寸和密度的屏幕上呈现出更好的视觉体验，主要用在移动端上面。

rem是根据根元素（也就是html标签）上的font-size来决定的，例如默认html的font-size为16px ，那么1rem就相当于16px ，也就是倍数的关系。那么当屏幕宽度不一样的时候，我们就需要动态修改html上的font-size来达到设配的效果。

动态修改有几种方案，第一种是通过媒体查询来修改：

@media screen and (min-width: 320px) { html { font-size: 21.33333333px; } } @media screen and (min-width: 360px) { html { font-size: 24px; } } @media screen and (min-width: 375px) { html { font-size: 25px; } } @media screen and (min-width: 384px) { html { font-size: 25.6px; } } @media screen and (min-width: 400px) { html { font-size: 26.66666667px; } } @media screen and (min-width: 414px) { html { font-size: 27.6px; } } @media screen and (min-width: 424px) { html { font-size: 28.26666667px; } } @media screen and (min-width: 480px) { html { font-size: 32px; } } @media screen and (min-width: 540px) { html { font-size: 36px; } } @media screen and (min-width: 720px) { html { font-size: 48px; } } @media screen and (min-width: 750px) { html { font-size: 50px; }

还有一种方法是通过js来动态修改：

function remSize(){ var deviceWidth = document.documentElement.clientWidth || window.innerWidth; //兼容多浏览器 //限制宽度 if(deviceWidth >= 750){ deviceWidth = 750 } if(deviceWidth <= 320){ deviceWidth = 320 } /* 为什么除以7.5呢？是因为结果比较好计算，这也是可以根据设计稿的宽度来决定的。例如设计稿宽度是750px ，那么将html的font-size设置成750/7.5=100px，那么1rem就相当于100px 。当屏幕宽度不同的时候，也可以达到自适应的效果。 */ document.documentElement.style.fontSize = (deviceWidth / 7.5) + px document.querySelector(body).style.fontSize = 0.16 + rem //相当于16px } remSize() //调整窗口大小时调用函数 window.onresize = ()=> remSize()

通过以上操作，在css文件中就可以使用rem单位了，在不同的环境下也都有着不错的效果和体验。

当然自己手写的还是比较粗糙，现在比较成熟和流行的方案有淘宝的flexible.js ，我们可以下载源码到自己的项目里面使用，原理和上面例子差不多，这里就不过多赘述。

如果你还是想用px ，懒得自己计算rem ，那也可以通过插件来解决，例如在vue项目中，通过安装postcss-px2rem这个插件，然后在vue.config.js中设置参数就可以了：

module.exports = { // 适配 css: { loaderOptions: { css: {}, postcss: { plugins: [ require(postcss-px2rem)({ remUnit: 75// 1rem为75px，意思是在750的设计稿下，把屏幕切成10份，那么一份就是75了。那么在其他宽度的设计稿下也是按照这个比率来计算，达到适配。 }) ] } } }, ... }

然后在css文件中你就可以继续愉快的使用px了。

但这个方法也存在着缺陷，例如项目中某些样式是通过实时计算的px值得到的，这些值就不能换算成rem了。

百分比

就如同字面一样，用百分比来设置高度，宽度，margin和padding等属性。但缺点在于他们参考的元素并不是统一的。例如width和height会参考父元素的width和height ，但margin和padding参考的是父元素的width ，而圆角百分比是参考自身的，因为这些原因很可能出现问题，所以不推荐单独使用。

移动端 viewport

Viewport（视口）是一个设备独立像素的抽象概念，它是浏览器上下文中的一个可视化区域。Viewport 的大小随着设备的屏幕大小而变化，而且无法通过 JavaScript 直接获取其准确值。Viewport在响应式网页设计方案中非常重要，在移动设备上尤为关键，因为移动设备通常会有不同大小的屏幕。

vw/vh

使用vw和vh适配是一种比较新的响应式布局技术，用于自适应不同尺寸屏幕和设备。vw和vh是视窗宽度和高度的相对单位，使用vw和vh单位可以使元素在不同尺寸的屏幕上自适应调整大小和位置，从而实现更好的布局效果。

使用viewport meta标签在HTML文件中设置视口：

使用vw单位代替固定值的宽度，例如：width: 50vw;

使用vh单位代替固定值的高度，在实际应用中可结合媒体查询等技术进行适配，例如： height: 50vh; @media (max-width: 768px) { height: 100vh; }

需要注意的是，由于视窗的宽高比例可能与实际屏幕比例不一致，因此在设置元素大小和位置时，最好使用相对定位和百分比来实现。此外，vw和vh单位在一些低版本浏览器中可能无法支持，需要进行兼容处理。

开发PC端和移动端两套页面

如果PC和移动端的页面差异太大的话，也是可以选择开发两套页面的。

总结

总之，个人感觉没有完美的适配方案，只能根据自己的需求来选择，尽量达到理想的状态。也不一定只选择一种方案，可以结合多种方案来实现效果。

如果上述内容有任何问题，欢迎留言讨论。

参考链接：https://blog.csdn.net/LOxia/article/details/123723334

https://juejin.cn/post/7035540378811891749

展开全文READ MORE

微信小程序云开发平台（微信小程序云开发 | 插件的微信小程序云开发）