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;}
    }

 第二步，引入樣式

在main.js中引入樣式reset

 第三步，vscode設置

vscode下載cssrem；安裝完成后，文件：首選項：設置，搜索cssrem，設置相關內容

 

 px轉rem保留的小數位

 

 當前開發（即設計圖）的尺寸，設置完后，px會以基font-size准轉化為rem，也就實現了設計圖大小轉化為rem.一旦我們縮小放大窗口就會實現自適應

 第四步，開發

輸入px后會自動給出rem的轉化。自此自適應完成