其中有遇到了乙個問題，就是移動端的適配問題，之前我一直用的rem的適配方案（不知道的可以點這裡），也沒有什麼太大的問題。但是又想著都 9102 了會不會有點撈～於是就找找看看有沒有更好的替代方案（結合時代的）。
viewport是使用者網頁的可是區域。翻譯中文就是「視區」，手機瀏覽器是把頁面放在乙個虛擬的"視窗"（viewport）中，通常這個虛擬的"視窗"（viewport）比螢幕寬，這樣就不用把每個網頁擠到很小的視窗中（這樣會破壞沒有針對手機瀏覽器優化的網頁的布局），使用者可以通過平移和縮放來看網頁的不同部分。
來自於 ppk(peter-paul koch) 關於 viewport 的三個觀點（so~1,so~2,so~3），有很多文章的觀點都出自那裡（包括本文）。
name
="viewport"
content
="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
>
所以說上面的那段**的意思就是：設定頁面的 layout viewport 等於 ideal viewport 寬度，初始化的頁面縮放比為1，使用者最大/最小的縮放比都為1，頁面不允許使用者手動縮放。
vw單位換算： 視口寬度為 100vw 佔滿整個視口區域，那麼 1vw 相當於佔整個視口寬度的1%，所以 1px= 1/375*100 vw 所有的頁面元素都可以直接進行計算換算成 vw 單位，但是這樣計算和百分比方案計算比較類似，都會比較麻煩。
但是這麼麻煩的東西肯定會有工具來解決的postcss-px-to-viewport這樣的話你的**原來怎麼寫現在還是怎麼寫。工具會預處理css，講 px 單位按照設定的值轉換為 vw 單位，同時也要設定一些配置，下面是配合vue-cli3.0的使用：
// package.json
...,
"devdependencies"
:
// postcss.config.js
module.exports =
}}
實際頁面：
寫到這裡基本上都結束了，就可以開心的使用了。
這兩個本來都是不收費的（對現在是付費的）
github 我不要star✨（瘋狂暗示）
移動端適配方案
最簡單的移動端適配方案 rem vw 1vw等於螢幕寬度的1 1vh等於螢幕高度的1 通常設計稿為750寬度，螢幕總寬度為100vw 那麼 100vw 750px 1px 1px 100 750 1px就等於0.13333333vw 把單位放大100倍便於計算 html設計稿畫素單位轉換為rem單位...
移動端適配方案
先來看下目前iphone各個型號尺寸和解析度 我們所能看到的手機端瀏覽器的可視視窗大小 viewport分為三種 layout viewport 布局檢視 移動裝置瀏覽器認為自己必須能夠讓所有 都顯示 即便那些不是為移動瀏覽器設計的 所以設計了乙個大於螢幕尺寸的viewport 用來相容那些不是為移...
移動端適配方案
尺寸 超小屏 768以下 小屏 768 992 中屏 992 1200 寬屏 1200以上 適配方案 適配細節 在網頁 的頭部，加入一行viewport元標籤。viewport是網頁預設的寬度和高度，上面這行 的意思是，網頁寬度預設等於螢幕寬度 width device width 原始縮放比例 i...