位置: IT常识 - 正文
h5响应式布局、PC和移动端适配方案(h5响应式布局是什么)
编辑：rootadmin推荐整理分享h5响应式布局、PC和移动端适配方案(h5响应式布局是什么)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:h5网站和响应式网站区别,h5网站和响应式网站区别,h5响应式布局是什么,h5响应式网站什么意思,h5网站和响应式网站区别,h5响应式布局是什么,h5响应式布局是什么,h5响应式布局是什么,内容如对您有帮助，希望把文章链接给更多的朋友！
春招真的是太卷了，让我怀疑春招到底在招谁（是我太菜惹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和移动端都有不错的体验。
remrem布局是一种响应式布局方式，用于将屏幕尺寸和设备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，而圆角百分比是参考自身的，因为这些原因很可能出现问题，所以不推荐单独使用。
移动端 viewportViewport（视口）是一个设备独立像素的抽象概念，它是浏览器上下文中的一个可视化区域。Viewport 的大小随着设备的屏幕大小而变化，而且无法通过 JavaScript 直接获取其准确值。Viewport在响应式网页设计方案中非常重要，在移动设备上尤为关键，因为移动设备通常会有不同大小的屏幕。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />width=device-width: 自适应手机屏幕的尺寸宽度maximum-scale: 缩放比例的最大值minimum-scale: 缩放比例的最小值inital-scale: 缩放的初始化user-scalable: 用户是否能缩放页面vw/vh使用vw和vh适配是一种比较新的响应式布局技术，用于自适应不同尺寸屏幕和设备。vw和vh是视窗宽度和高度的相对单位，使用vw和vh单位可以使元素在不同尺寸的屏幕上自适应调整大小和位置，从而实现更好的布局效果。
使用viewport meta标签在HTML文件中设置视口：
<meta name="viewport" content="width=device-width, initial-scale=1.0">使用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
上一篇：VUE前端实现“模糊搜索“（纯前端）(vue前端页面设计)
下一篇：解决前端项目问题，uniapp运行微信开发工具小程序，出现× initialize报错，以及浏览器无法运行(前端项目中遇到的问题,如何解决)
