移动端的适配方案

这是一个老生常态的问题,关于移动端适配,实际上有很多种方案,比如:

  1. 小程序端的rpx
  2. 通过动态的调整根元素的字体大小,来使用rem做计量单位。
  3. 以及视口单位

今天主要说下:视口单位如何做适配

这是从mdn文档截图,对视图单位的描述:

项目背景和实现思路

我们目前在开发一个移动端的项目,ui给我们按照iphone6750*1334)的尺寸来设计,那我们如何去适配其他的尺寸呢?其实我的理解就是在iphone6的基础上,进行等比兑换,拿ihone5来举例,它的尺寸是:640*1136,我们在开发的过程中,怎么能保证页面由750*1334的尺寸转变成640*1136的尺寸,而页面布局还不乱呢?我的思路就是不用px做布局,直接使用vw来做,因为手机尺寸怎么变化,我们都是基于视口单位(vw)来进行的换算,比如我用10vwiphone6的尺寸它就是75px,在iPhone5的尺寸它就是70px,这样页面布局使用的就是相对单位,而不是绝对单位。

具体在项目中怎么做呢?

  1. 正常按照设计图(iphone6)的尺寸开发,使用px单位。(这解释下,为啥不直接使用vw,因为转化太麻烦了,比如:你在蓝湖,直接复制设计图的css,然后自己再去一个个的转换单位,太麻烦,就算使用scss的函数,还是一样麻烦,所以直接一个loader去转化,懒得自己改)。
  2. 编写loader,对csspx单位进行等比转化vw

loader应该怎么编写

  1. 拿到css源码(sourceCssString)。
  2. 通过正则进行匹配拿到px尺寸单位,并放到一个数组中。
  3. 遍历数组,通过px进行切割获取val,然后val/750*100,得到vw单位大小。
  4. 替换sourceCssString
  5. 返回sourceCssString

项目根目录编写pxToVw.js

pxToVw.js 复制代码
module.exports = function (source) {
    if (source) {
        const defaultOptions = {
            unitToConvert: 'px',
            viewportWidth: 750,
            unitPrecision: 4,
            viewportUnit: 'vw',
        }
        const options = { ...defaultOptions, ...this.getOptions() }
        const reg = /\d{0,9}px/g
        const values = (source.match(reg))
        if (values) {
            values.forEach(item => {
                const [val] = item.split(options.unitToConvert)
                const transformValue = (val / options.viewportWidth * 100).toFixed(options.unitPrecision)
                source = source.replace(item, `${transformValue}${options.viewportUnit}`)
            })
        }
        return source
    }
}

然后在webpack.common.js引用

webpack.common.js 复制代码
    module: {
      rules: [
        {
          test: /\.s[ac]ss$/i,
          use: [
            env.mode === "development" ? "style-loader" : loader,
             {
               loader: path.resolve(__dirname, "pxToVw.js"),
             },
            "css-loader",
            'postcss-loader',
            "sass-loader",
          ],
        },
        {
          test: /\.css$/i,
          use: [
            env.mode === "development" ? "style-loader" : loader,
             {
               loader: path.resolve(__dirname, "pxToVw.js"),
             },
            "css-loader",
            'postcss-loader',
            "sass-loader",
          ],
        },
      ],
    },

至此视口单位的适配,就结束了。

假如说:我想用iphone5(640*1136)的基准来做适配怎么办?很简单,传参,下面是示例代码:

webpack.common.js 复制代码
{ loader: path.resolve(__dirname, "pxToVw.js"),
  options:{
    viewportWidth: 640,
  }
},

pxToVw.js这个loader中,已经使用this.getOptions()获取传递的参数。

总结

其实我是比较推荐使用视口单位来做适配的,至于rem,不太推荐,因为这个方案,本身当时就是一个过渡方案(当时vw的兼容性还很差),不过现在已经很好了,完全可以vw一把梭。

相关推荐
孤水寒月2 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀2 小时前
html初学者第一天
前端·html
耶啵奶膘4 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家5 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689975 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽7 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头7 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全8 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing8 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆8 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试