移动端适配

移动端适配方案

响应式布局

• 通过媒体查询 @media
• 写两套代码,一套pc,一套移动端,通过userAgent判断用户使用的设备,跳转到相应的网站

移动端适配(rem)

1. 元素的度量单位

   1. px像素
   2. em根据父元素来计算大小（项目中比较少用）
   3. rem根据根节点(html)元素的font-size进行计算大小
   4. vw/vh根据手机屏幕计算大小
   5. rpx小程序特有单位

2. rem计算公式: 元素的宽度(高度)= html的font-size * rem

3. 使用rem进行移动端适配的原理

   1. 以ipone6宽度作为参考,给它的根标签设置大小
   2. 获取手机的屏幕宽度,根据屏幕宽度,以iphone作为参照物进行等比缩放

在项目中配置rem

1. 用来根据手机宽度设置根元素字体的大小

   1. 安装 amfe-flexible,
   2. 并在main.js中导入

import 'amfe-flexible';

2. px转成rem,免去我们手动输入rem

   1. 安装 postcss-pxtorem

   2. 在vue.config.js中进行配置

const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');

module.exports = {
    publicPath: "./",
    // 关闭eslint检查
    lintOnSave: false,
    // 配置css前缀,px转rem
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    autoprefixer(),
                    pxtorem({
                        rootValue: 37.5,
                        propList: ['*']
                    })
                ]
            }
        }
    }
};

3.  css的处理

    1.  less、sass、stylus 预处理语言，方便我们模块化编写代码,必须编译成css文件才能使用
    2.  postcss 用来对css文件进行处理,称之为后处理语言