移动端适配

原创已于 2023-10-17 17:27:02 修改 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html5 #css3

于 2023-05-19 18:47:44 首次发布

文章介绍了移动端开发中的适配策略，包括使用Rem进行尺寸单位转换，通过Post-css自动化处理px到rem的转换，以及利用flexible.js处理兼容性和动态调整字体大小。同时，提到了autoprefixer和postcss-pxtorem插件在配置中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近接触到移动端（不管是说自己工作中还是说别的同学遇到的），感觉自己好像没有一个系统的解决方案，每次都是遇到了，网上查一下，然后写。

现在想总结一下一个我认为比较好的方案，方便其他刚接触到写移动端的小伙伴写。

2.配置postcss.config.js文件（和src同级）

3.动态设置HTML的fontSize

一、常用适配方案

不同端使用不同代码
不同端使用同一套代码，利用CSS样式来控制。即媒体查询
移动端屏幕适配

利用rem按根节点（body）的字体大小来缩放
利用vh/vw按屏幕高度和宽度来缩放

二、Rem适配

将CSS属性单位从px改成rem
动态获取用户设备的屏幕宽度

$fontSize=\frac{deviceWidth*rootValue}{rootWidth}$

deviceWidth: 屏幕宽度；

rootValue: 设计稿fontSize ；

rootWidth: 设计稿宽度；

但是我们不可能每次说去手动设置屏幕宽度啥的，所以我们接下来要介绍post-css css转换工具。

三、post-css

1.安装post-css和相关插件

npm i postcss autoprefixer postcss-pxtorem -D

2.配置postcss.config.js文件（和src同级）

module.exports = {
    plugins:{
        autoprefixer:{
            overrideBrowserslist:['Android >= 4.0','iOS >=7']
        },
        'postcss-pxtorem':{
            // 根节点的fontSize值
            rootValue:16,
            // 需要修改的css属性是全部
            propList:['*'],
            // 忽略使用:root定义的值，因为vite使用了:root定义了变量
            selectorBlackList:[':root']
        }
    }
}

3.动态设置HTML的fontSize

在main.js中配置：

const rootValue = 16
const rootWidth = 390
const deviceWidth = document.documentElement.clientWidth
document.documentElement.style.fontSize = deviceWidth * rootValue / rootWidth +'px'

四、flexible.js

flexible.js用来处理移动端各种设置兼容问题。

它的思想就是利用动态设置根元素（html标签）的font-size大小，来动态改变css3中rem这个单位中对应px的大小。

比如html的font-size默认为16px，所以1rem就默认为16px。

flexible.js的思想是把整个视图宽度区域分为10份，每一份为一个1rem，总的就是10rem，例如375px的宽度，那么1rem就是37.5px，因此设置根元素的font-size为37.5px.

flexible.js：

// 首先是一个立即执行函数，执行时传入的参数是window和document
(function flexible (window, document) {
  var docEl = document.documentElement  // 返回文档的root元素
  var dpr = window.devicePixelRatio || 1 // 获取设备的dpr，即当前设置下物理像素与虚拟像素的比值
 
  // adjust body font size 设置默认字体大小，默认的字体大小继承自body
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();
 
  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }
 
  setRemUnit()
 
  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })
 
  // detect 0.5px supports  检测是否支持0.5像素，解决1px在高清屏多像素问题，需要css的配合。
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var 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))

把flexible.js这个文件在main.js在全局引入，但是设置font-Size我们不能每次都口算吧，所以我们可以用一个插件——px to rem & rpx & vw (cssrem)！！！

比如，设计稿是750px，我们把它分为10等份，750px/10=75px