這裏主要是針對視口安裝相應的插件以及配置,以及導入項目快捷圖標
視口的好處：省去媒體查詢動態計算屏幕每份大小，系統會自動計算，直接按照750px圖片標註的大小
1 如何使用vw
1.1 安裝相應的插件
npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext cssnano --S
1）postcss-px-to-viewport
自動將項目中的px轉換爲vw
750設計圖片，不同視口大小等比縮放
2）postcss-aspect-ratio-mini
重要用來處理img/iframe/video等元素的自適應問題，使元素根據寬高比自動計算出容器大小，實現等比縮放
3）post-write-svg
主要用來處理移動端1px的解決方案
主要使用的是border-image和background來做1px的相關處理
4）postcss-cssnext
css未來語法
5）cssnano
壓縮
6）--S在開發和運行都要用
7）添加一個插件
npm i cssnano-preset-advanced --save-dev
1.2 修改相應的配置文件
文件名：postcssrc.js
在多個插件有相同的功能，比如自動添加前綴，只保留一個，避免衝突
1.3 告訴頁面視口爲設備寬度
meta:vp
2 設置項目快捷圖標
2.1 將快捷圖標拷貝到static文件加下（必須）
2.2 在index.html文件中導入.ico
然後，在訪問網頁的時候就可以在導航欄看到標誌該網頁的圖標了
地址可以通過拖拽圖片得到