vscode开发vue项目实现pc端自适应_cssrem_rem_reset.scss,pc端媒体查询常用设置

前言

在项目中，要想实现自适应，往往需要百分比+rem结合。本文实现内容如下：不同窗口大小，文字自适应

第一步

设置媒体查询样式，不同的pc端窗口设置不同的html跟字体大小（为什么设这个我就不说了，看rem概念就知道了）

reset.scss放在assets/style/reset.scss

/*  reset.scss 文件*/

//重点，媒体查询
@media (min-width: 1024px){
    body,html{font-size: 18px}
    } /*>=1024的设备*/

    @media (min-width: 1100px) {
    body,html{font-size: 20px}
    } /*>=1100的设备*/
    @media (min-width: 1280px) {
    body,html{font-size: 22px;}
    } /*>=1280的设备*/

    @media (min-width: 1366px) {

    body,html{font-size: 24px;}
    }  

    @media (min-width: 1440px) {
    body,html{font-size: 25px }
    } 

    @media (min-width: 1680px) {
    body,html{font-size: 28px;}
    } 
    @media (min-width: 1920px) {
    body,html{font-size: 33px;}
    }