移动端的适配

前言

随着科技的快速发展，手机也成为了我们日常生活中的一部分，能够让我们便利快捷的随时的能够浏览网页。可手机的屏幕尺寸不一，导致我们传统的单位px（像素）无法满足用户需求。于是css3中新增了一个单位：rem.
rem是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数的一个css单位，也就是我们 前端常说的适配单位rem。因为rem的特性相对长度单位，常被用来做移动适配，pc端页面不推荐使用rem。

rem

rem-媒体查询

主要是为了解决手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号的问题。 媒体查询能够检测视口的宽度，然后编写差异化的CSS样式。 当某个条件成立，执行对应的CSS样式。

@media(width:375){
   html{
    font-szie：37.5px；
    }
}
.box{
    width : 5rem
    height : 3rem
}       //当视口宽度为375的时候    宽度就是5*37.5  高度是3*3.75$
//目前rem布局中，将网页等分成10份，HTML标签的字号为视口宽度的1/10。

rem的引入方式

我主要用的是vue的框架，所以主要说一下vue中做rem适配的方法， 用框架还是需要依赖插件

//首先，安装amfe-flexible依赖，同时适应pc和移动端。
npm install amfe-flexible -S
//下一步就是安装px2rem-loader，px自动转化为rem
npm install px2rem-loader -D
// 在main.js中引入 
import 'amfe-flexible'
// 在vue.config.js中配置
module.exports = {
    chainWebpack: config => {
        config.module
            .rule('scss')
            .test(/.scss$/)
            .oneOf('vue')
            .use('px2rem-loader')
            .loader('px2rem-loader')
            .before('postcss-loader') // this makes it work.
            .options({ 
            remUnit: 75, //根据视觉稿，rem为px的十分之一，750px  75rem
            remPrecision: 8 //保留8位小数
            })
            .end()
    }
}

配置完成重新启动项目即可