逆戰班全新的一周結束了,今天我要總結一下px to rem的使用
首先我要先解釋一下這兩個單位:
px :pixel的縮寫,像素的意思
rem : 是一個相對單位,1rem等於根元素的font-size值
其次,為什么要實現px to rem?
移動端布局有兩種:流式布局和rem布局
其中,rem布局的原理就是頁面中的元素采用rem作為尺寸或者間距的單位,由於我們平時都是以px(像素)為單位,所以我們就得px轉rem
那么問題來了,如何實現px to rem?
(1)vsCode中去下載一個插件 -> px to rem -> 在設置把對應的font-size設置下-> alt + z進行px轉rem的操作
(2)當然也可以瀏覽器搜索一些在線px轉rem的工具
(在線px轉rem:http://www.ofmonkey.com/front/rem)
接下來利用一個簡單的小案例(實例代碼)給大家演示是如何實現轉換的?
(實例代碼) (選中style區域)
(改寬度) ( alt+z轉換rem)
(注:也可以直接用rem單位,每寫好一個px單位alt+z轉rem)
我對px to rem的使用說明到此結束,望大家多多參考並提出意見