移动端适配处理（兼容性前缀）

移动端布局

通常叫做流式布局，百分比布局
常用长度单位:

% px rem vw vh

使用步骤

移动端适配和加后缀

• 安装amfe-flexible

1. 首先把安装amfe-flexible包

npm i amfe-flexible -S 

2. 配置 postcss-pxtorem
   postcss-pxtorem会将px转换为rem rem单位用于适配不同宽度的屏幕 根据标签的font-size值来计算出结果

npm install --save postcss-pxtorem@5.1.1

3. 在项目入口文件main.js 中引入amfe-flexible import 'amfe-flexible'

4. 在根目录的index.html 的头部加入手机端适配的meta代码

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

5. 新建postcss.config.js文件
   Vue CLI 内部使用了 PostCSS
   默认开启了autoprefixer 配置autoprefixer (浏览器前缀规则)
   自动生成前缀 browserslist 字段

postcss.config.js配置

module.exports = {
  module: { 
    rules: [
        { test: /\.vue$/, use: 'vue-loader' },
        { test: /\.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] }, 
        { test: /\.css$/, use: [ 'style-loader', 'css-loader', ] }] }, 
  plugins: { 
        'autoprefixer': { 
             overrideBrowserslist: [ 
                "Android 4.1", 
                "iOS 7.1",
                "Chrome > 31", 
                "ff > 31", 
                "ie >= 8" 
        ] }, 
      'postcss-pxtorem': { 
             rootValue: 37.5, 
             propList: ['*'] 
      }
 } 
}

项目结构

image.png