文章彙整

網頁文字單位 PX,EM,REM的差別: 如何修改Magento2 預設rem

Astral WebBy Astral Web 5 years agoNo Comments
首頁  /  Magento操作  /  Open Source  /  網頁文字單位 PX,EM,REM的差別: 如何修改Magento2 預設rem

Magento2 (3)

PX:

px的最大特色是精準度高,也因為他不知道他是絕對數值,不管你在那種螢幕寬的裝置下看到的字體大小都一樣,屬於最入門款的文字單位。

 

EM:

em是相對數值,他會隨著外圍 文字大小做變化,例如你設定網站預設字型大小為16px,再設定的區塊內設定

 

font-size: 1.2rem;

 

那麼你實際上看到的字型大小就是:16px * 1.2 = 19.2 px。以下是展示當預設字型大小定義為16px時用em改字型大小的結果.

 

       Magento2 (1)

 

 

但是em有點麻煩人的地方是,如果再加入一層在內部,輸出結果就會以 1.2 * 1.2 的倍數再放大,例如下圖就是在1.2em 中 再加一層1.2em (font-size1.2-nest)

 

 Magento2 (4) 

 

這對相當清楚自己要什麼的人來說是相當方便的文字單位,但對很多人來說確不容易掌握.因此有了另一種單位rem.

 

 

REM:

rem的字義為:root em,使用方法和em非常類似,它也是相對數值.但是他和em不同的地方是,他只對 root 層級的文字大小做加乘的效果,所以他不會和em一樣產生巢狀的效果 在1.2em 中 再加一層1.2em產生的結果如下:

Magento2 (2)

 

使用者不需要一直做數學計算,唯一會影響 rem 比例的只有 html 的文字大小.

 

如何修改Magento2 預設rem

Magento2預設使用的是rem的文字單位,如果想要改成其他單位可以在此路徑下:

lib/web/css/source/lib/variables/_typography.less

 

搜尋:font-size-unit 找到如下圖:
Magento2 (5)

接著直接將變數的單位改成你想用的文字單位即可。

 

 

想了解更多請見: Magento教學導覽

 000

歐斯瑞

歐斯瑞 - 一個對網路世界充滿熱情的團隊

歐斯瑞提供免費電商知識,並協助各大類型之企業 電商諮詢建置MagentoShopify 相關的電商專案。

立即聯繫我們

推薦文章

Categories:
  Open SourceAdobe Commerce前端開發Magento操作技術應用

留下回應

你的電子郵件地址不會被公開.