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

2024-06-26 20:19| 来源: 网络整理| 查看: 265

前言

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

width=device-width: 自适应手机屏幕的尺寸宽度 maximum-scale: 缩放比例的最大值 minimum-scale: 缩放比例的最小值 inital-scale: 缩放的初始化 user-scalable: 用户是否能缩放页面 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

【本文地址】

公司简介

联系我们