移动端适配方案

最新推荐文章于 2024-03-16 15:15:03 发布

加麻加辣多香菜

最新推荐文章于 2024-03-16 15:15:03 发布

阅读量336

点赞数

文章标签： javascript 前端 css vue.js

本文链接：https://blog.csdn.net/weixin_48150129/article/details/128112066

版权

随着5G的大规模普及，移动设备能帮助我们更快更方便的解决更多的问题。顺应时代潮流，更多的项目也不可避免的遇到移动端适配的问题。我将工作中用到的几种适配和其使用场景总结了下来，希望能对你选择移动端适配方案时有所帮助。

媒体查询

某PHP项目就是用的媒体查询方式来适配移动端。因为是先确定的PC端并内容基本保持一致，只是在布局方面有一定的区别。所以可以用媒体查询限定当是宽度在800px下的移动设备时显示什么样的布局。

@media mediatype and|not|only (media feature){
      css-code;
}
//用@media做标识符号
//mediatype 媒体类型，值可选all print scree
//关键字 and not only
//media feature 媒体特性，必须有小括号包含

中间件判断当前设备类型

在做官网时，因为PC端和移动端的布局等有很大区别，通过媒体查询简单修改布局的方式不能较好满足设计稿的需要，所以采取了通过中间件判断当前设备类型并分配路由的方式。

function isMoible(UA) {
  return !!/(Android|webOS|iPhone|iPod|tablet|BlackBerry|Mobile)/i.test(UA)
}
export function deviceType(UA) {
  if (isMoible(UA)) {
    return {
      type: 'mobile',
    }
  } else {
    return {
      type: 'pc',
    }
  }
}

import { deviceType } from '~/util/deviceType'
// 获取到设备类型后处理逻辑
export default function (context) {
  context.userAgent = process.server
    ? context.req?.headers['user-agent']
    : navigator.userAgent
  // 添加属性保存返回的匹配信息
  context.deviceType = deviceType(context.userAgent)
  const isMobile = context.route.name?.includes('mobile')
  if (isMobile ^ (context.deviceType.type === 'mobile')) {
    if (context.deviceType.type === 'pc') {
      context.redirect('/home')
    } else {
      context.redirect('/mobile/home')
    }
  }
}

rem

也可以在入口文件将屏幕宽度的10分之一作为了1rem的基准值。这样我们可以结合rem将显示器的宽度调整为和设计稿对应的宽度，很方便的进行布局。
```
var REM;
REM = document.documentElement.clientWidth
$("html").css("font-size", REM / 10 + "px")
```
flexible + postcss-px2rem

postcss-pxtorem将项目中的px单位转换为rem单位，lib-flexible是设置rem基准值。和组件库vant比较适配。

npm install postcss postcss-pxtorem --save-dev

  postcss: {
    plugins: {
      'postcss-pxtorem': {
        rootValue: 37.5,  // 设计图的宽度/10
        propList: ['*'],
        mediaQuery: false,
        exclude: 'ignore',
      }
    }

// 插件。插件会自动将px转换为rem，对照设计稿的px写样式即可。
export default defineNuxtPlugin(() => {
  if (process.client) {
    (function flexible(window, document) {
      const docEl = document.documentElement
      const dpr = window.devicePixelRatio || 1
 
      // adjust body font size
      function setBodyFontSize() {
        if (document.body)
          document.body.style.fontSize = `${12 * dpr}px`
 
        else
          document.addEventListener('DOMContentLoaded', setBodyFontSize)
      }
      setBodyFontSize()
 
      // set 1rem = viewWidth / 10
      function setRemUnit() {
        const rem = docEl.clientWidth / 10
        docEl.style.fontSize = `${rem}px`
      }
 
      setRemUnit()
 
      // reset rem unit on page resize
      window.addEventListener('resize', setRemUnit)
      window.addEventListener('pageshow', (e) => {
        if (e.persisted)
          setRemUnit()
      })
 
      // detect 0.5px supports
      if (dpr >= 2) {
        const fakeBody = document.createElement('body')
        const testElement = document.createElement('div')
        testElement.style.border = '.5px solid transparent'
        fakeBody.appendChild(testElement)
        docEl.appendChild(fakeBody)
        if (testElement.offsetHeight === 1)
          docEl.classList.add('hairlines')
 
        docEl.removeChild(fakeBody)
      }
    }(window, document))
  }
})