vue2.0-4.0的移动端及PC端屏幕大小适配

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

适配配置完成后需重启项目才会生效

移动端适配vue-cli3.0

第一种方案(常用)——px转rem适配方案：

【第1步、使用pxtorem px转成rem】——让网页根据设备dpr和宽度，利用viewport和html根元素的font-size配合rem来适配不同尺寸的移动端设备
 yarn add lib-flexible 或者 npm install lib-flexible(建议用yarn，我用npm出错了，用yarn是可行的) 
【第2步、引入lib-flexible】
在main.js引入中：import \'lib-flexible/flexible.js\'
【第3步、方案一：使用npm或yarn 安装 如 npm install --save-dev postcss-loader postcss-px2rem】(推荐方案一)
注：vue-cli3.0+里好像已经内置postcss-loader了。所以也可以直接yarn add postcss-px2rem 如果不生效再考虑安装postcss-loader
然后在配置文件中配置，(可以在vue.config.js中配置，也可在package.json中配置)
module.exports = {
    css: {
        loaderOptions: {
            css: {
                // options here will be passed to css-loader
            },
            postcss: {
                // options here will be passed to postcss-loader
                plugins: [require(\'postcss-px2rem\')({
                    remUnit: 37.5  //缩放比例：是75还是37.5还是其他数值，需要根据ui图来定。取值方式为  设计图宽度/10
                })]
            }
        }
    }
}
【第3步、方案二：安装postcss-pxtorem】
yarn add postcss-pxtorem
如果你的配置文件是package.json(在你创建vue项目时，会让你选择配置文件)，则在package.json内，添加postcss：
"postcss": {
   "plugins": {
    "autoprefixer": {},
    "postcss-pxtorem": {
           "rootValue": 37.5,   // 设计稿宽度的1/10,（JSON文件中不加注释，此行注释及下行注释均需要删除）
           "propList":["*"]   // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
        }
    }
},
如果你的配置文件是自定义配置文件，则你可以在根目录下创建配置文件vue.config.js，并配置如下信息
module.exports = {
    css: {
        loaderOptions: {
            css: {
                // options here will be passed to css-loader
            },
            "postcss": {
                "plugins": {
                    "autoprefixer": {},
                    "postcss-pxtorem": {
                        "rootValue": 37.5,   
                        "propList":["*"]   
                    }
                }
            }
        }
    }
}
【4、在index.html中 替换成如下代码】
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,shrink-to-fit=no,user-scalable=no">

第二种方案——px转vw适配方案(一般不用，这里只留作记录)

【1、使用 postcss-px-to-viewport】注意：移动端用方便，不过在pc端会出新字体过大的现象
npm install  postcss-px-to-viewport 或者 yarn add  postcss-px-to-viewport 
【2、配置postcss-px-to-viewport】
package.json中，在postcss中添加代码：
"postcss": {
    "plugins": {
    "autoprefixer": {},
    "postcss-px-to-viewport": {
         "viewportWidth": 375,
         "minPixelValue": 1
        }
    }
},
【3、在index.html中添加如下代码】
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,shrink-to-fit=no,user-scalable=no">

移动端适配vue-cli2.0

第一种方案(常用)：通过lib-flexible,px2rem-loader实现适配

【1、安装lib-flexible px2rem-loader】
yarn add lib-flexible       yarn add px2rem-loader
【2、在main.js中引入lib-flexible】
import \'lib-flexible/flexible.js\'
【3、在 index.html 中添加：移动适配 meta标签】
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
【4、在 build/util.js 中 按如下更改3处】
①将px2rem-loader添加到cssLoaders中，②options中添加minimize
const cssLoader = {
  loader: \'css-loader\',
  options: {
   minimize: process.env.NODE_ENV === \'production\',
   sourceMap: options.sourceMap
  }
 }
const px2remLoader = {
  loader: \'px2rem-loader\',
  options: {
   remUnit: 37.5  //缩放比例：是75还是37.5还是其他数值，需要根据ui图来定。取值方式为  设计图宽度/10
  }
 }
③在generateLoaders方法中添加两处px2remLoader
function generateLoaders(loader, loaderOptions) {
 const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
 if (loader) {
  loaders.push({
   loader: loader + \'-loader\',
   options: Object.assign({}, loaderOptions, {
    sourceMap: options.sourceMap
   })
  })
 }

要修改的地方

第二种方案：通过一串js代码实现(一般不用，这里只留作记录)

在主入口：index.html，<head> 标签内添加如下JS 代码：（实现在标准 375px宽度适配下，100px = 1rem。）
<script>
 (function () {
  // 在标准 375px 适配下，100px = 1rem;
  var baseFontSize = 100; 
  var baseWidth = 375;
  var set = function () {
   var clientWidth = document.documentElement.clientWidth || window.innerWidth;
   var rem = 100;
   if (clientWidth != baseWidth) {
    rem = Math.floor(clientWidth / baseWidth * baseFontSize);
   }
   document.querySelector(\'html\').style.fontSize = rem + \'px\';
  }
  set();
  window.addEventListener(\'resize\', set);
 }());
</script>

PC端适配

PC端使用此种方法进行适配，只需改进一个地方即可，如下(另外remUnit改成192或设计稿比例)

找到/node_modules/lib-flexible/flexible.js，并修改其代码如下
function refreshRem(){
    var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 540) {
       - width = 540 * dpr;  //原本是屏幕宽度>540时则宽度固定为540
       + width = width * dpr;  //现在是宽度>540时则以当前宽度为准
    }
    var rem = width / 10;
    docEl.style.fontSize = rem + \'px\';
    flexible.rem = win.rem = rem;
}
提个醒：
1、个人发现每次在安装新的babel相关包的时候，webpack会自动把width=width*dpr改回到540*dpr，从而造成页面排版问题。
这里要注意一下，再改成width*dpr即可
2、在做了此屏幕适配处理后，IE,Microsoft Edge等浏览器会不识别1px这种的转化。所以在用到1px时请使用/*no*/注释掉，不让其转化。
如border: 1px solid #ccc; /*no*/
3、另外注意到一个问题，如在引入组件库时，比如antd-vue组件库时，
我们也需要将组件库的css文件里带1px的样式后面加/*no*/注释掉。以保证IE等浏览器也可完美适配。
如antd-vue的css文件在/node_modules/ant-design-vue/dist/antd.css

提个醒

=== postcss-pxtorem中不进行转换 ===
通过配置规则和单位使用Px或PX来解决：
如： border:1PX solid #fff;border:1Px solid #fff;
=== postcss-px2rem中不进行转换 ===
通过注释解决：
1、当你遇到1px的边框时，通常容易发现页面缺失部分边框，这时你可以使用/*no*/语法来屏蔽该属性转换，
例如：border: 1px solid red; /*no*/
2、由于字体的特殊性，我们在编译font-size属性时，通常不使用rem单位，这时候你可以这样使用：
例如：font-size: 24px; /*px*/

以上是 vue2.0-4.0的移动端及PC端屏幕大小适配 的全部内容， 来源链接： utcz.com/z/379548.html

回到顶部