ps：此方法需使用到less或者scss的@變數來支援
以設計圖 1920 寬度為例：
css中存在一種叫vw的單位，是針對瀏覽器寬度為基礎的百分比單位，與%的區別在於，子元素%是相對於父級元素的寬度來計算的，而vw則是針對瀏覽器的寬度來計算的。打個比方，瀏覽器寬度為1920px，父級元素寬度為100px，子元素寬度寫50%則是50px；而子元素如果寫50vw，則其寬度則為瀏覽器寬度的50%即960px；
弄清楚這點之後，我們可以計算得出：
100vw = 1920px;
1vw = 19.2px
1px = 1 / 19.2vw;
由此，我們可以設定變數 @1px : 1 / 19.2vw;
如此一來，在寫樣式的時候就可以使用到@1px進行計算，如圖：
這樣如果瀏覽器大小發生變化，對應的vw值也會改變，自然vw計算的px也會發生改變，就達到了我們相容各種瀏覽器的目的；
但是，這個方法美中不足的是，當瀏覽器寬度逐漸變小時，margin padding等值也會越來越小，而字型最小是12px，所以大概在800px左右的時候元素會擠在一塊，雖然我們現在不必做800解析度的pc相容，一般最小相容到1200，但是為了嚴謹，我們還是用**查詢相容一下1200以下解析度的
當然，也不是說按1200設計圖的元素屬性值重寫一遍
重點1200 / 1920 = 0.625
我們知道了兩者的比例，這時候再設定乙個變數，也可以叫常量，因為這時候我們要設定乙個固定的值
因為按1920設計圖來的，所以，我們設定1200下的每1px為1920的0.625px；
@1200-1px : 0.625px
這時候寫
@media screen and(max-width:1201)
如圖：
Vue實現PC端解析度自適應
方案 安裝依賴npm install px2rem loader d npm install lib flexible s引入依賴import lib flexible px轉換成rem vue loader的options和其他樣式檔案loader最終是都是由build utils.js裡的方法生...
pc端前端頁面適應不同解析度的問題
1,這裡記住將此必須寫在head中，這樣樣式才會先被載入出來，如果將此寫在自己定義的js檔案中，js檔案寫在body後面的話，樣式將不會被按照預想的被顯示出來 2,這種寫法對於我現在的 這裡的學時就不應該使用相對定位，如下 顯示 charset utf 8 form control unit nam...
iPhone各種尺寸的解析度
愛瘋粑粑又出來搞事了，發布了三款新的機型，相比之前的機型，螢幕都比之前的大，這裡對所有機型的解析度做一下整理，方便適配 手機型號 啟 尺寸 命名iphone xs max 1242 x 2688 default 1242h 3x iphonexr 828 x 1792 default 828h 2x...