转换单位实现页面适配

对于用vue写移动端的适配问题

创建项目

参考(66条消息) 使用vue脚手架搭建项目_ 厚积薄发的博客-CSDN博客

任务一：100%实现静态页面

静态页面思路：

1、根据页面需要展示的设备，应用来区分选择什么技术实现

2、分析页面布局 提取公共部分—如主框架main、最大宽度、最小宽度、选中样式

3、分析页面确定功能板块，确定每个盒子包含内容—从功能分析盒子内容

4、页面需要的静态图标、图片导入文件。

1、移动端适配方案

1-1 安装插件

npm install amfe-flexible --save
npm install postcss-pxtorem --save-dev

1-2 在main.js中引入amfe-flexible

import 'amfe-flexible';

1-3 新建文件postcss.config.js 并在文件中配置postcss-pxtorem

module.exports = {
  "plugins": {
    "postcss-pxtorem": {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75;
      },
      propList: ['*'] // 需要被转换的属性
    }
  }
}

1-4 public/index.html添加viewport元数据标签，使页面宽度和设备宽度一致

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

<!--
含义如下：
* width=device-width：视口宽度和设备保持一致
* initial-scale=1：视口的默认缩放比例1.0
* maximum-scale=1：最大缩放比例1.0
* minimum-scale=1：最小缩放比例1.0
* user-scalable=no：不允许用户自行缩放
-->

1-5 执行上述步骤之后，就可以使用px进行开发了，在页面控制台可以看到，px单位自动被转换成了rem单位

注意

如果是已经写好的静态页面可能会导致样式变乱，字体变大等问题，建议新建一个common文件夹放到assets下面全局引入样式（比如字体较大可设置全局样式）如果不合适微调

2、设置公共样式，最大框、字体大小、内容显示区域-填充-间距，默认颜色等