px to rem的使用


逆戰班全新的一周結束了,今天我要總結一下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的使用說明到此結束,望大家多多參考並提出意見


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM