1. 程式人生 > >移動端——postcss注意事項

移動端——postcss注意事項

PostCSS類似於less、sass,目的在於讓css變得像一門程式語言,支援變數

注意,如果使用本地ui框架(非CDN連線),使用PostCSS會導致框架失效(px單位轉換成vmin),使用PostCSS的黑名單屬性或者使用CDN載入可以避免

1、PostCSS會自動新增瀏覽器的字首(.postcssrc.js  檔案中的 autoprefixer 屬性),但是預設新增谷歌瀏覽器的字首,修改package.json檔案中的 browserslist 屬性可以讓你postcss支援更多的瀏覽器,(browserslist 的第一個引數為篩選瀏覽器使用的比例)

2、使用vue建立的專案,在專案的根目錄,有一個.postcssrc.js 檔案,,在檔案中可以新增外掛,常用的外掛有

 2.1、postcss-px-to-viewport (把px單位轉換成設定的單位)

    'postcss-px-to-viewport':{
      viewportWidth:720,//視窗可視區域寬(設計稿的寬度)
      viewportUnit:'vmin',//預設以哪一條邊為主做計算(vmin是以最小的邊為計算,vmax是以最大的邊為計算)
    }