怎樣簡便的使用vw完成移動端rem適配
阿新 • • 發佈：2020-08-13
怎樣簡便的完成移動端rem適配
px（畫素）進行頁面開發的基礎單位
px:絕對單位，頁面按精確畫素展示
em 相對單位
em:相對單位，相對於父元素的font-size來決定大小
rem 相對單位
rem:是相對於根元素（即html的文字大小），我們在使用時可以在根元素設定一個參考值即可，相對於em使用，減少很大運算工作量，多用於移動端的頁面單位
vw 相對寬度
vw:相對於瀏覽器視窗寬度，一個視窗被均分為100單位（即整個視窗寬度為100vw）
vh 相對高度
vh:相對於瀏覽器視窗高度，一個視窗被均分為100單位（即整個視窗寬度為100vh）
如何進行簡單的px,rem轉換
在我們開發移動端專案中，因為移動端的螢幕大小不一，所以在開發過程中不能使用px這個絕對單位來進行書寫，通常我們是使用rem作為單位進行書寫，那麼，怎麼做才能達到適配的效果呢？
在開發中，有各種各樣的適配方式，在這裡，我就說一種純css方式，只需要寫一行程式碼便可做到rem的適配效果：
通過了解上面的單位後，我們知道vw是根據視窗寬度來進行變化的，所以我們不妨拿vw與rem進行結合來書寫出合適的適配。
為了方便計算 我們需要1rem=100px如果我們得到的設計稿寬度是750px
即1px = 0.1333333vw
即1rem = 13.33333vw
所以 我們只需要在樣式重置檔案中寫上下面這段程式碼即可完成頁面適配
html {
font-size: 13.333333333vw;
background-color: #fff;
}
當然，這只是一種計算方法，裡面的資料是可以變化的，總結一下計算方法：
- (100/設計稿寬度)X想要1rem等於的畫素值 = 根字型為多少vw*
- 如示例中的(100/750)X100 = 13.3333
這樣做就已經完成了頁面的適配。
例如：750稿子中一個圖片的寬度是540px,那麼我們轉換之後就應該寫
width:5.4rem
當然，在實際開發中，為了防止字型大小變過來變過去，導致頁面變化，通常在之後會給body設定一個預設字型大小：
body{
font-size:16px;
}
預設字型大小請根據開發需求自行設定
轉載自：https://blog.csdn.net/a1015895218/article/details/105386166