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

发布时间：2023-05-12 文章分类：WEB开发, 电脑百科投稿人：李佳字号：默认 | 大 | 超大打印

前言

春招真的是太卷了，让我怀疑春招到底在招谁（是我太菜惹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在响应式网页设计方案中非常重要，在移动设备上尤为关键，因为移动设备通常会有不同大小的屏幕。

<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

标签 PC, 响应式, 布局