美文网首页@IT·互联网
关于移动端适配

关于移动端适配

作者: jia林 | 来源:发表于2024-02-24 22:41 被阅读0次

分享一篇移动端适配的多个方案,也可以说说你们是怎么做的。

概念

  • 自适应:根据不同的设备屏幕大小来自动调整尺寸、大小
  • 响应式:会随着屏幕的实时变动而自动调整,是一种更强的自适应

为什么要做适配

市面上移动端屏幕尺寸非常的繁多,很多时候我们希望一个元素在不同的屏幕上显示不同的大小以此来更好的还原效果图:

1.当我们针对一个手机进行布局设计时,设置了一个 300 * 200 大小的盒子
2.但在不同的设备上,由于逻辑像素不同的问题,会使得这个盒子在更大的视口上显得很小,在更小的视口上显示很大
3.因此我们需要进行适配让它在不同设备上所占据视口的空间比例是相同的

当前几种适配方案

1.百分比设置(不推荐)
  • 因为不同属性的百分比值,相对的可能是不同参照物,所以百分比往往很难统一
  • 百分比在移动端适配中使用是比较少的
2.rem+html动态的font-size
3.vw单位
4.flex的弹性布局

方案1:rem+html动态的font-size

rem 单位是相对于 html 元素的 font-size 来设置的,通过在不同屏幕尺寸下,动态的修改 html 元素的 font-size 以此来达到适配效果

在开发中,我们只需要考虑两个问题:

  • 针对不同的屏幕,设置 html 不同的 font-size
  • 将原来设置的尺寸,转化成 rem 单位
font-size 的尺寸
屏幕尺寸 html的font-size 盒子的设置宽度 盒子的最终宽度
375px 37.5px 1rem 37.5px
320px 32px 1rem 32px
414px 41.4px 1rem 41.4px
px 与 rem 的单位换算
  • 代码换算
1.根据 html 的宽度计算出 font-size 的大小,并设置到 html 上
2.监听页面尺寸的变化,实时修改 font-size 大小
// 基准大小
const baseSize = 375 / 10 // 375为UI提供的375尺寸,如果是750尺寸则设置为750
// 设置 rem 函数
function setRem () {
  // 当前页面宽度相对于 375(设计稿尺寸) 宽的缩放比例,可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 375
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}
  • 借助插件postcss-pxtorem (npm install postcss-pxtorem)

方案2:vw 适配方案

100vw 相当于整个视口的宽度 innerWidth,1vw 相当于视口宽度的 1%,将 px 转换为 vw 即可完成适配,其实上面的 rem 就是模仿 vw 方案

vw相比于rem的优势:
  • 不需要去计算 html 的 font-size 大小,也不需要去给 html 设置 font-size
  • 不会因为设置 html 的 font-size 大小,而必须再给 body 设置一个 font-size 防止继承
  • 因为不依赖 font-size 的尺寸,所以不用担心某些原因的 html 的 font-size 尺寸被篡改,导致页面尺寸混乱
  • vw 更加语义话,1vw 相当于 1/100 viewport 的大小
  • rem 事实上作为一种过渡的方案,它利用的也是 vw 的思想
px 与 vw 的单位转换
  • 代码换算
比如屏幕尺寸为 375px,元素大小为 150px,我们需要将 150px 转换成对应的 vw 值:150 / 3.75=40
// less/scss 函数
@vwUnit: 3.75;
.pxToVw(@px) {
  result: (@px / @vw) * 1vw
}
.box {
  width: .pxToVw(100)[result];
  height: .pxToVw(100)[result];
} 
  • 借助插件postcss-px-to-viewport-8-plugin (npm install postcss-px-to-viewport-8-plugin)

相关文章

  • 解决vue移动端适配问题

    1,先看看网上关于移动端适配讲解 再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点 字体的大小...

  • 解决vue移动端适配问题

    1,先看看网上关于移动端适配讲解 再聊移动端页面适配,rem和vw适配方案! 基础点:rem相对根节点字体的大小。...

  • 书签管理器4

    移动端问题 关于移动端适配,你必须要知道的 - 掘金 稍微整理了几个经常在...

  • 关于移动端适配

  • 关于移动端适配

    要想用到100%必须所有的层级都用到100%,包括html,body。。。。。。(calc() 函数用于动态计算长...

  • 关于移动端适配

    移动端适配只要在html上加个 这个750是指屏幕宽度,这个值改成UI设计稿上的宽度,然后下面所有的尺寸都按照设计...

  • 关于移动端适配

    一. 相关术语总结 设备像素 (device pixel) 屏幕显示的最小单位 没有固定的物理尺寸 在同一个设备上...

  • 移动端适配

    移动端适配

  • 像素及适配

    移动端适配

  • 关于移动端的适配

    写在前面 本文参考了大量关于移动端适配的资料 侵删 谢谢 基础介绍 在说明移动端的适配之前我们需要理解一个重要的东...

网友评论

    本文标题:关于移动端适配

    本文链接:https://www.haomeiwen.com/subject/rwpgadtx.html