vue移动端适配的问题，和全局scss？

关于适配大问题是特别常见的，适配的方案有很多种，比如媒体查询，输入rem等等，而我用的则是个人认为比较好的一种，你正常输入px，当巡行的时候他会自动给你转换成rem

首先就是需要下一个包
//yarn add postcss-px2rem -D
然后在vue.config.js中进行一个配置loaderOptions:
postcss: {
            //下载两个包
            plugins: [
                require('postcss-px2rem')({
                    remUnit: 100
                })
            ]
        }
配完之后，新建一个utils文件夹，作为公共的方法
在文件夹里创建一个js文件，用来给px和rem做转换
const remUnit = 100
const widthUnit = 375
const setFontSize = () => {
  const windowWidth = window.innerWidth
  const fontSize = windowWidth / widthUnit * remUnit / 2
  document.querySelector('html').style.fontSize = fontSize + 'px'
}
setFontSize()
window.addEventListener('resize', () => {
  setFontSize()
})
最后在main.js中全局引入
然后在重启一下服务就可以了

import './utils/rem'

下面我来说一下关于全局scss的问题，定义宏，定义变量

首先就是要对样式进行初始化，因为每个浏览器对标签的间距都是不一样的，如果不进行初始化那么在每个浏览器上表现出来也是不一样的
        html {
        /* 2 */
        font-size: 100px;
    }
    
    html,
    body,
    div,
    span,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    abbr,
    address,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    samp,
    small,
    strong,
    sub,
    sup,
    var,
    b,
    i,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    canvas,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section,
    summary,
    time,
    mark,
    audio,
    video {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
        box-sizing: border-box;
    }
    
    body {
        line-height: 1;
    }
    
    :focus {
        outline: 1;
    }
    
    article,
    aside,
    canvas,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section,
    summary {
        display: block;
    }
    
    ul {
        list-style: none;
    }
    
    blockquote,
    q {
        quotes: none;
    }
    
    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
        content: '';
        content: none;
    }
    
    a {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }
    
    ins {
        background-color: #ff9;
        color: #000;
        text-decoration: none;
    }
    
    mark {
        background-color: #ff9;
        color: #000;
        font-style: italic;
        font-weight: bold;
    }
    
    del {
        text-decoration: line-through;
    }
    
    abbr[title],
    dfn[title] {
        border-bottom: 1px dotted #000;
        cursor: help;
    }
    
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    
    hr {
        display: block;
        height: 1px;
        border: 0;
        border-top: 1px solid #cccccc;
        margin: 1em 0;
        padding: 0;
    }
    
    input,
    select {
        vertical-align: middle;
    }
    
    html,
    body {
        min-width: 100vw;
        min-height: 100vh;
        box-sizing: border-box;
    }
    然后新建scss的_mixin.scss和_variables.scss然后建一个index.scss将这两个引入

_mixin.scss是定义宏的，引入直接@incude就可以
_variables.scss用来定义变量
然后在vue.config.js中配置就可以了
//配置全局css
        scss: {
            prependData: `@import "~@/assets/Scss/index.scss";`
        },