# vue移动端适配方案-2305

**Repository Path**: connerljlx_admin/mobile

## Basic Information

- **Project Name**: vue移动端适配方案-2305
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-12-29
- **Last Updated**: 2023-12-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 移动端适配方案
flex布局 结合 rem动态单位

rem适配原理：
    rem 根元素（html标签）字体大小 ， 不做任何设置情况 html字体大小 永远是 16px 1rem = 16px 此时不是动态单位
    重点: 
    
        1 根据屏幕宽度 来动态设置 html 字体大小  一般会设计为 屏幕宽度 1/10
        2 根据设计图 宽度 动态计算 rem单位 
            假设 设计图 宽度 是 750 1rem即为  75   设计图 一个元素 尺寸是 500x500  定义尺寸为 
                宽(500/75)rem 高 (500/75)rem

具体步骤
 + 定义js 动态改变字体大小
 ```js
    const setRem = () => {
    // 获取屏幕宽度
    const screenWidth = document.documentElement.getBoundingClientRect().width;
    // 设置html字体大小
    document.documentElement.style.fontSize = screenWidth/10+"px";
    }

    setRem();
    window.addEventListener('orientationchange', setRem); // 手机横屏视频
    window.addEventListener('resize', setRem);
 ```
 + 引入 flexible.js 手淘团队开源 js插件
```js
npm i lib-flexible -S

// main.js 引入
import 'lib-flexible/flexible.js'
```

 # 插件 将 px 自动转换成rem
 + vscode插件 半自动
    px to rem 
    alt+s 设置 rem 基准单位 （根据设计图 1rem大小）
    alt+z 进行转换
 + postcss插件 自动化
    postcss 后处理器  （sass less stylus 预处理器 变成css之前 处理样式代码）

    postcss插件  
        postcss-pxtorem
    步骤
    1 下载 postcss-pxtorem 插件
    2 vite中配置
```js
import postCssPxToRem from 'postcss-pxtorem'
// https://vitejs.dev/config/
export default defineConfig({
  css: {
    postcss: {
      plugins: [
        // 使用插件 配置 属性
        postCssPxToRem({
          rootValue: 40, // 定义 rem 基准值 基础单位 设计图1/10
          // 定义哪些css 属性 单位 px自动转换成rem  或者使用 PX 则不转换成rem
          propList: ['font', 'font-size', 'line-height', 'letter-spacing', 'width', 'height'], // ['*']所有css属性单位都转换成rem
          exclude: /node_modules/i // 哪些文件中css 单位 不转换
        })
      ]
    }
  }
})

```