前端一套代码多端通用，pc端、移动端适配方案

最新推荐文章于 2025-03-17 17:01:49 发布

@小张在努力

最新推荐文章于 2025-03-17 17:01:49 发布

阅读量2.5k

点赞数 9

文章标签：前端 javascript css3 css

本文链接：https://blog.csdn.net/qq_45751819/article/details/142942141

版权

最近公司要做一个简易的内部系统，该系统要求在pc端、移动端、平板上均有较好的展示效果，这就涉及到了一个问题，前端样式代码的多端适配。经过在网上搜集资料和实际操作一番后，我总结了一下我的思路

网上关于这方面的文章有很多，方法也很多，大家可以根据自己的项目需要进行选择

我的实践

项目准备：需要2个插件

安装：

npm i lib-flexible -S

npm i postcss-px2rem -S

在main.js引用：

import 'lib-flexible'

作用：

lib-flexible 根据屏幕宽度，自动设置html的font-size
postcss-px2rem 自动将px单位转换成rem

！！！！！修改lib-flexible源码

因为lib-flexible主要用于手机自适应，当屏幕尺寸大于540px时，它设置html的font-size固定为54px，并不能根据屏幕尺寸调整<html>标签的font-size的大小，所以这里需要修改lib-flexible源码。

在node-modules依赖包lib-flexible文件夹中的flexible.js文件，可以看到下面源码

    function refreshRem(){
        //获取屏幕宽度
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
        	//这里当屏幕宽度大于540时，宽度写死为540了，所以要想电脑端也能通过rem自适应,替换成 width = width * dpr;
            width = 540 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

修改为下面代码width = width * dpr

    function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
        	//变更
            width = width * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

配置postcss-px2rem

（1）vue.config.js中的配置方法

module.exports = {
  css: {
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          require('postcss-px2rem')({
            remUnit: 37.5
          })
        ]
      }
    }
  },
}

（2）vite.config.js的配置方法

import { fileURLToPath, URL } from 'node:url'
// 导入postcss-px2rem插件
import postcssPx2rem from 'postcss-px2rem'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  // 配置postcss-px2rem插件
  css: {
    postcss: {
      plugins: [
        postcssPx2rem({
          remUnit: 37.5
        })
      ]
    }
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    port: 3000,
    host: '0.0.0.0'
  }
})

但是为了页面布局可以更好看一些，可以再结合媒体查询，控制页面的宽度、内外边距，或者页面的其他布局结构

超过1200px，设置左右内边距，此处提一点，如果你想固定页面的宽度，不随页面变化，那么需要写行内样式，因为lib-flexible插件的原因，页面内容宽度会随着页面宽度变化，但是行内样式不受影响

可以这样做