vue-cli3.0 移动端适配

最新推荐文章于 2024-02-27 00:00:00 发布

weixin_34167819

最新推荐文章于 2024-02-27 00:00:00 发布

阅读量1k

点赞数

文章标签： javascript json 移动开发 ViewUI

原文链接：https://juejin.im/post/5c088f71e51d45721d710213

版权

方案：

固定一个某些宽度，使用一个模式，加上少许的媒体查询方案
使用flexbox解决方案
使用百分比加媒体查询
使用rem

用px2rem配合lib-flexible

关于移动端的适配，我喜欢用px2rem配合lib-flexible，非常方便，vue-cli3.0后，项目配置被大大精简了，这使得原来配置px2rem的文件不复存在，但其实只要掌握了正确的姿势，配置方法比原来更简单~

lib-flexible

作用：让网页根据设备dpr和宽度，利用viewport和html根元素的font-size配合rem来适配不同尺寸的移动端设备
安装：yarn add lib-flexible 或者 npm install lib-flexible
引入：入口文件main.js中：import 'lib-flexible/flexible.js

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 75, // 设计稿宽度的1/10,（JSON文件中不加注释，此行注释及下行注释均删除）
        "propList":["*"] // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
     }
    }
  },
复制代码

使用vw

以前喜欢用lib-flexible配合px2rem达到移动端适配的效果，最近了解了下vw 与 vh单位，以viewport为基准，1vw 与 1vh分别为window.innerWidth 与 window.innerHeight的百分之一。

安装

命令行输入：yarn add postcss-px-to-viewport 或 npm i postcss-px-to-viewport -save -dev

配置

package.json中，在postcss中添加代码：

"postcss": {
        "plugins": {
            "autoprefixer": {},
            "postcss-px-to-viewport": {
                "viewportWidth": 750,
                "minPixelValue": 1
            }
        }
    },
复制代码