位置: IT常识 - 正文
H5移动端适配方案rem/vw(移动端h5页面适配)
发布时间：2024-01-08推荐整理分享H5移动端适配方案rem/vw(移动端h5页面适配)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:h5页面怎么适配各种机型,h5移动端适配方式有哪些,h5手机端适配,h5移动端适配方案,h5移动端兼容,h5移动端适配方案,h5移动端适配方法有哪些,h5移动端适配方式有哪些,内容如对您有帮助，希望把文章链接给更多的朋友！
前言
在讲解适配方案之前，我们聊聊为什么要做适配？
因为视口、逻辑像素、分辨率这些变量的不同，在每个设备展示都不一样，需要一种方案来统一。
物理像素：也就是分辨率，一个物理像素是显示器上的最小的物理显示单元，所以分辨率越高，屏幕可展示的像素点越多，也就更清晰。
逻辑像素：也叫设备独立像素，可以认为是计算机坐标系统中的一个点，这一个点代表可以由程序使用的虚拟像素（css像素），然后由相关系统转换为物理像素。
设备像素比：简称dpr(Device pixel ratio)，定义了物理像素和设备独立像素的对应关系，设备像素比 = 物理像素 / 逻辑像素。
在移动端布局的时候，经常会有移动端如何展示1px的问题？
一般设计稿都是以750px宽度为基准，当设计师给出1px的数据的时候，对于视觉视口宽度为375px的手机，dpr如果为2，逻辑像素应该是0.5px，但移动端css最低只支持显示1px大小，这时候边框宽度就会是设计稿而言就会略粗一点。
视口
通常与浏览器窗口相同，但不包括浏览器的UI、菜单栏。
文档的 Element.clientWidth 是指一个文档使用 CSS pixels 单位表示的内部宽度，包括其 padding（不包括 border、margin 或垂直滚动条）。这就是视口的宽度。-----《MND文档》
移动设备的视口的默认值为 980px。
对于各种不同形状，不同设备像素比移动设备，其浏览器的视口（窗口中显示网页信息的区域）不一定与渲染页面大小相同。
移动设备的视口的默认值为 980px，一般情况下都要比这些设备的屏幕尺寸要大。
为了让页面能够全部展示，这些浏览器在渲染时会对页面进行缩放。
比如在一个宽 375px 的移动设备显示一个视觉视口宽为 980px 的页面，移动设备浏览器会对这个页面进行缩放直至其视觉视口宽度为 375px（具体取决于浏览器实现）。
但直接缩放页面会导致页面字体变小，使得缩放后的页面显示效果都不会很理想。 在移动端，为了让页面展示更多的内容，视口有以下区分。
布局视口：移动设备视口的默认值是980px，比屏幕宽度大，目的是能够展示更多那些PC端的网页内容；
视觉视口：屏幕宽度；
理想视口：布局视口=视觉视口；
上文说到移动设备布局视口的默认值是980px，由于视觉视口只有屏幕宽度，比如375px，那么我们看到的页面就会有一定的缩放，这样的效果是不太好的。
那么如何创建一个理想视口，让移动端浏览器使用屏幕宽度作为视口替换默认的 980px 宽度视口呢？
我们可以在 HTML 的头部添加以下标签：
<meta name="viewport" content="width=device-width">这里 width 属性指的是布局视口宽度，现在布局视口的宽度被设置为了设备的屏幕宽度，也就是布局视口=视觉视口。
即文档视口宽度大小与设备宽度大小 100% 对应（转换为 CSS 像素值相同），现在理想视口就实现了。
其他属性释义：
initial-scale(初始缩放比例)。
maximum-scale(最大缩放比例)。
minimum-scale(最小缩放比例)。
user-scalable(是否允许用户进行缩放操作)。
这些属性的默认值已经很好了，开发时可以忽略掉这些属性。 移动端适配方案
1、弹性盒模型布局。
2、流式布局（百分比布局）。
3、rem布局。
4、vw/vh。
5、响应式布局（媒体查询）。
常用适配方案
1、rem & vw。
2、rem & 媒体查询。
下面重点讲解常用适配方案。 rem适配
rem这个单位代表根元素（通常为 元素）的 font-size 大小。当用在根元素的 font-size 上面时，它代表了它的初始值。–《MDN》 原理与实现：
通俗来讲，rem是一个相对单位，根元素的font-size的大小为一个rem单位。
rem适配指的是，通过设置根元素的font-size的大小，后续子元素就可以使用rem为单位，实际CSS pixels 单位需要在这个基础上乘以根元素的font-size。
eg. 设置根元素font-size为16px，设置其中一个子元素宽度为20rem，那这个子元素实际的宽度为20*16px=320px 一般移动端设计稿会以750px为基准，但由于每个移动设备的宽度不同，我们需要去按照这个基准去按比例适配。
// 设计稿宽度const WIDTH = 750// 设计稿中某元素的宽度const uiWidth = 100px // 屏幕宽度与设计稿宽度比例const scale = document.documentElement.clientWidth / WIDTH// 屏幕中的实际宽度const realWidth = uiWidth * scale // 以375px屏幕宽为例// realWidth = 100 * （375/750）= 50px按照这个思路，为了计算方便，我们可以使用rem来进行适配，将以上代码可以改写为：
// 根据屏幕宽度与设计稿宽度比例 设置rem单位长度const htmlFontSize = (document.documentElement.clientWidth / WIDTH ) * 100 + 'px'// (375/750)*100= 50px// 实际大小其实就是let realWidth = uiWidth * htmlFontSize / 100// 100*50/100 = 50px// 得出最终公式realWidth = uiWidth / 100 + 'rem'最后，需要监听页面大小改变，rem适配配置就完成了。
function setRem() { const WIDTH = 750 // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改 const scale = document.documentElement.clientWidth / WIDTH; document.documentElement.style.fontSize = scale + 'px';}setRem();window.onresize = setRem;优点：
兼容性高，可以通过动态设置根元素的font-size来适配不同的屏幕。
缺点：
1、需要使用js，更适用于手机端，在大屏设备（如ipad）上，元素的尺寸大，可展示的内容不足。
2、移动端1px问题需要另外处理。 针对大屏改进方案( flexible 方案)
动态设置 rem 实现在不同尺寸的设备上界面展示效果一致。
1、限制 rem 的最大值。 2、通过媒体查询限制内容最大宽度。
插件使用postcss-pxtorem。
1、下载postcss postcss-pxtorem；
npm install postcss postcss-pxtorem --save-dev
2、js动态设置；
<script> const baseSize = 37.5 //跟配置中rootValue的值是一致的 // 设置 rem 函数 function setRem() { // 当前页面宽度相对于 375 宽的缩放比例，可根据自己需要修改。 const scale = document .documentElement.clientWidth / 375 // 设置页面根节点字体大小 最高为两倍图 即设计稿为750 document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px' } // 初始化 setRem() // 改变窗口大小时重新设置 rem window.onresize = function () { setRem() }</script>3、写好index.css之后执行以下脚本，可以编译出一个已经进行rem转换的文件main-rem.css。
var fs = require ( 'fs' ) ;var postcss = require ( 'postcss' ) ;var pxtorem = require ( 'postcss-pxtorem' ) ;var css = fs.readFileSync( 'index.css' , 'utf8' ) ;var options = { rootValue : 37.5 , propList : [ '*' ] } ;var processedCss = postcss(pxtorem( options )).process( css ).css;fs.writeFile('main-rem.css', processedCss, function (err) { if (err) { throw err; } console.log('Rem file written.');});效果：
/*index.css*/body { margin: 0; padding: 0;}#app { width: 375px; height: 200px; background-color: brown; color: #fff; font-size: 16px;}vw适配（推荐）
原理与实现：
vw/vh是将屏幕直接分为100等份，1vw是1%的屏幕宽度，1vh是1%的屏幕高度。
优点：
比较方便，只需要css就可以实现适配。
缺点：
1、vw、vh都是固定的，无法改变，和rem适配一样，对于大屏幕而言展示的内容较少。
2、兼容性问题(ie11不支持，少数低版本手机不支持)，但目前兼容性越来越好。
方案升级：vw+rem适配方案：
前文谈到，vw的缺点是无法改变，rem的缺点是需要使用js来设置，而且它们都有各自的优点，那么可以将这两者巧妙的结合来解决这个问题。
html { /*针对于750px的设计稿*/ font-size: calc(100*100vw/750)}div { /*100px*/ width: 1rem;}/*媒体查询：适配大屏幕*/@media screen and (min-width: 450px) { html { font-size: calc(50 * 100vw / 750); }}流式布局
流式布局也就是百分比布局。
比较简单粗暴，由于参考对象是父元素，尤其是嵌套层级比较深的时候，计算百分比的时候有时会有些许误差。
width/height：参考父元素 margin/padding：参考父元素的width border-radius/background-size/tarnsform: 参考自身宽高
响应式布局
通过媒体查询@media来适配不同屏幕大小，具体可以参考MDN文档
// 用户设备的最小宽度为 680px @media (min-width: 680px), screen { … } // min-和max-可以测试一个在两个值之间的宽度 @media (min-width: 30em) and (max-width: 50em) { … }
总结
目前比较推荐的移动适配方案是rem&vw，rem&媒体查询等，了解其中的适配原理对于前端而言是非常重要。
虽然有很多插件可供使用，但是熟知其中奥秘也能给我们的工作带来很大的帮助。
上一篇：Uni-app + Vue3 + TS +Vite 创建项目
下一篇：Realsense D455/435内参标定以及手眼标定
