PC、移动端适配 - Vue、H5、 Jquery

野性酷女 2024-03-22 15:41 82阅读 0赞

Vue 移动端、PC 端适配可以使用lib-flexible、amfe-flexible、postcss-pxtorem、postcss-px2rem、postcss-px-to-viewport这几个插件。

lib-flexible 是淘宝手机前端开发团队开发出来的一个开源插件，会自动在 html 的 head 中添加一个 <meta name='viewport'> 的标签，同时会自动设置 html 的 font-size 为屏幕宽度除以10。

amfe-flexible 是 lib-flexible 的升级版本，使用 vw 作为布局单位，从底层根本上解决了不同尺寸屏幕的适配问题，因为每个屏幕的百分比是固定的、可预测、可控制的。

postcss-pxtorem 和 postcss-px2rem 插件，用于将 px 单位转化为 rem。可以和 lib-flexible 搭配使用。

postcss-px-to-viewport 插件用于将 px 单位转化为 vw, vh, vmin, vmax 单位。可以和 amfe-flexible 搭配使用。

### 方案**`1：`**lib-flexible & postcss-pxtorem ###

1. 安装依赖 lib-flexible：npm install lib-flexible --save

2. 在 main.js 中导入依赖：import 'lib-flexible/flexible'

3、安装依赖 postcss-pxtorem**`:`**npm install postcss-pxtorem@5.0.0 --save-dev

4、配置 postcss-pxtorem**`:`**

vue-cli2：在根目录中的 postcss.config.js (没有新建即可)，添加如下代码：

module.exports = {
        plugins: {
        "postcss-pxtorem": {
          rootValue: 37.5, // lib-flexible 将屏幕分成10份(10rem)，这里设置表示设计图宽度为10*37.5=375px
          unitPrecision: 5, // 保留rem小数点多少位
          propList: ['*', '!border'], // 存储将被转换的属性列表，'!font-size' 即不对字体进行rem转换
          selectorBlackList: ['.radius'], // 要忽略并保留为px的选择器，例如fs-xl类名，里面有关px的样式将不被转换，支持正则写法。
          replace: true,
          mediaQuery: false, //（布尔值）媒体查询( @media screen 之类的)中不生效
          minPixelValue: 4, // 设置要替换的最小像素值，px小于4的不会被转换
          exclude: /(node_module)/,  //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
        }
      }
    }

vue-cli3：在根目录中 vue.config.js (没有新建即可)，添加如下代码：

module.exports = {
      css: {
        loaderOptions: {
          postcss: {
            plugins: [
              require('postcss-pxtorem')({
                rootValue: 37.5, // lib-flexible 将屏幕分成10份(10rem)，这里设置表示设计图宽度为10*37.5=375px
                unitPrecision: 5,  // 保留rem小数点多少位
                propList: ['*', '!border'], // 存储将被转换的属性列表，'!font-size' 即不对字体进行rem转换
                selectorBlackList: ['.radius'], // 要忽略并保留为px的选择器，例如fs-xl类名，里面有关px的样式将不被转换，支持正则写法。
                replace: true,
                mediaQuery: false, //（布尔值）媒体查询( @media screen 之类的)中不生效
                minPixelValue: 4, // 设置要替换的最小像素值，px小于4的不会被转换
                exclude: /(node_module)/,  //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
              })
            ]
          }
        }
      }
    }

5、注意事项

*  配置完成后注意删除掉 index.html 里的视窗 meta 标签 <meta name='viewport'> 以便让 lib-flexible 插件帮你生成；
 *  如果某些 px 尺寸不想转换成 rem ，将 px大写即可。
    
        .box{
        	width:200Px;
        	height:200PX;
        }

### 方案2：lib-flexible & postcss-px2rem ###

1. 安装依赖 lib-flexible：npm install lib-flexible --save

2. 在 main.js 中导入依赖：import 'lib-flexible/flexible'

3、安装依赖 postcss-px2rem**`:`**npm install postcss-px2rem --save-dev

4、配置 postcss-px2rem**`:`**

vue-cli2：在根目录中的 postcss.config.js (没有新建即可)，添加如下代码：

module.exports = {
      plugins: {
        "postcss-px2rem": {
          remUnit: 37.5  //lib-flexible 将屏幕分成10份(10rem)，这里设置表示设计图宽度为10*37.5=375px
        }
      }
    }

vue-cli3：在根目录中的 vue.config.js (没有新建即可)，添加如下代码：

module.exports = {
      css: {
        loaderOptions: {
          postcss: {
            plugins: [
              require('postcss-px2rem')({
                remUnit: 37.5  //lib-flexible 将屏幕分成10份(10rem)，这里设置表示设计图宽度为10*37.5=375px
              })
            ]
          }
        }
      }
    }

5、注意事项

### 方案3 (推荐)：amfe-flexible & postcss-px-to-viewport ###

1、安装依赖 amfe-flexible：npm install amfe-flexible --save

2、在 main.js 中导入依赖：import "amfe-flexible/index"

3、安装依赖 postcss-px-to-viewport：npm install postcss-px-to-viewport --save-dev

4、配置 postcss-px-to-viewport：

vue-cli2：在根目录中的 postcss.config.js (没有新建即可)，添加如下代码：

module.exports = {
      plugins: {
        'postcss-px-to-viewport': {
          unitToConvert: 'px',   // 需要转换的单位
          viewportWidth: 750,    // 视口宽度，等同于设计稿宽度
          unitPrecision: 5,      // 精确到小数点后几位
          /**
          * 将会被转换的css属性列表，
          * 设置为 * 表示全部，如：['*']
          * 在属性的前面或后面设置*，如：['*position*']，*position* 表示所有包含 position 的属性，如 background-position-y
          * 设置为 !xx 表示不匹配xx的那些属性，如：['!letter-spacing'] 表示除了letter-spacing 属性之外的其他属性
          * 还可以同时使用 ! 和 * ，如['!font*'] 表示除了font-size、 font-weight ...这些之外属性之外的其他属性名头部是‘font’的属性
          * */
          propList: ['*'],
          viewportUnit: 'vw',    // 需要转换成为的单位
          fontViewportUnit: 'vw',// 需要转换称为的字体单位
          /**
          * 需要忽略的选择器，即这些选择器对应的属性值不做单位转换
          * 设置为字符串，转换器在做转换时会忽略那些选择器中包含该字符串的选择器，如：['body']会匹配到 .body-class，也就意味着.body-class对应的样式设置不会被转换
          * 设置为正则表达式，在做转换前会先校验选择器是否匹配该正则，如果匹配，则不进行转换，如[/^body$/]会匹配到 body 但是不会匹配到 .body
          */
          selectorBlackList: [],
          minPixelValue: 1,      // 最小的像素单位值
          mediaQuery: false,     // 是否转换媒体查询中设置的属性值
          replace: true,         // 替换包含vw的规则，而不是添加回退
          /**
          * 忽略一些文件，如'node_modules'
          * 设置为正则表达式，将会忽略匹配该正则的所有文件
          * 如果设置为数组，那么该数组内的元素都必须是正则表达式
          */
          exclude: [],
          landscape: false,      // 是否自动加入 @media (orientation: landscape)，其中的属性值是通过横屏宽度来转换的
          landscapeUnit: 'vw',   // 横屏单位
          landscapeWidth: 1334   // 横屏宽度
        }
      }
    }

vue-cli3：在根目录中的 vue.config.js (没有新建即可)，添加如下代码：

module.exports = {
      css: {
        loaderOptions: {
          postcss: {
            plugins: [
              require('postcss-px-to-viewport')({
                unitToConvert: 'px',   // 需要转换的单位
                viewportWidth: 750,    // 视口宽度，等同于设计稿宽度
                unitPrecision: 5,      // 精确到小数点后几位
                /**
                * 将会被转换的css属性列表，
                * 设置为 * 表示全部，如：['*']
                * 在属性的前面或后面设置*，如：['*position*']，*position* 表示所有包含 position 的属性，如 background-position-y
                * 设置为 !xx 表示不匹配xx的那些属性，如：['!letter-spacing'] 表示除了letter-spacing 属性之外的其他属性
                * 还可以同时使用 ! 和 * ，如['!font*'] 表示除了font-size、 font-weight ...这些之外属性之外的其他属性名头部是‘font’的属性
                * */
                propList: ['*'],
                viewportUnit: 'vw',    // 需要转换成为的单位
                fontViewportUnit: 'vw',// 需要转换称为的字体单位
                /**
                * 需要忽略的选择器，即这些选择器对应的属性值不做单位转换
                * 设置为字符串，转换器在做转换时会忽略那些选择器中包含该字符串的选择器，如：['body']会匹配到 .body-class，也就意味着.body-class对应的样式设置不会被转换
                * 设置为正则表达式，在做转换前会先校验选择器是否匹配该正则，如果匹配，则不进行转换，如[/^body$/]会匹配到 body 但是不会匹配到 .body
                */
                selectorBlackList: [],
                minPixelValue: 1,      // 最小的像素单位值
                mediaQuery: false,     // 是否转换媒体查询中设置的属性值
                replace: true,         // 替换包含vw的规则，而不是添加回退
                /**
                * 忽略一些文件，如'node_modules'
                * 设置为正则表达式，将会忽略匹配该正则的所有文件
                * 如果设置为数组，那么该数组内的元素都必须是正则表达式
                */
                exclude: [],
                landscape: false,      // 是否自动加入 @media (orientation: landscape)，其中的属性值是通过横屏宽度来转换的
                landscapeUnit: 'vw',   // 横屏单位
                landscapeWidth: 1334   // 横屏宽度
              })
            ]
          }
        }
      }
    }

Jquery

// 判断屏幕宽度，动态设置视口，如果是大屏幕就不设置
    if(window.screen.width < 360) {
    	$('head').append('<meta name="viewport" content="width=1280">')
    } else if(window.screen.width < 1366) {
    	$('head').remove('[name="viewport"]')
    	$('head').append('<meta name="viewport" content="width=1366">')
    }
    else {
    	$('head').remove('[name="viewport"]')
    }