px和pt的區别?國内的設計師大都喜歡用px，而國外網站喜歡em和rem，三者之間有什麼區别？，我來為大家科普一下關于px和pt的區别?下面希望有你要的答案，我們一起來看看吧!

px和pt的區别

國内的設計師大都喜歡用px，而國外網站喜歡em和rem，三者之間有什麼區别？

px：實際就是像素，用px設置字體大小比較精準和穩定。

px特點：

px是絕對單位。

• 浏覽器頁面縮放時，px并不能跟随變化，所以無法調整使用px作為單位的字體大小。
• 國外的大部分網站能夠調整原因在于使用rem或em作為字體單位。
• Firefox能夠調整px和rem和em，但是大部分的國産浏覽器使用IE内核。

em：就是以父級作為基準來縮放字體大小。

em特點：

• Em是相對單位。
• Em的值并不固定，受到父級字體大小的影響。

rem：以于根元素作為基準來縮放字體大小的。

rem特點：

• rem是相對單位，受到根元素字體大小影響。
• 修改根元素就可以成比例地調整所有。
• 避免字體大小逐層複合的連鎖反應。

Em和rem單位區别：

1. 單位基于：em 基于使用他們的元素的字體大小 。rem基于 html 元素的字體大小。
2. 繼承 ：em可能受任何繼承的父元素字體大小影響。 rem可以從浏覽器字體設置中繼承字體大小。
3. 使用情況： 使用em單位應根據組件的字體大小而不是根元素的字體大小。不使用em單位，并且需要根據浏覽器的字體大小設置縮放的情況下使用rem。 而使用rem單位，除非你确定你需要 em 單位，包括對字體大小。

繪制頁面的時候具體使用什麼單位主要由項目來決定，如果不考慮低版本浏覽器兼容問題，那就使用rem,如果兼容低版本IE就使用px,或者兩者同時使用。

Px設置字體大小時存在問題：對浏覽器進行縮放時，頁面布局會亂，這時就需要使用rem或em來定義字體大小。

制作手機自适應網頁，由于手機寬度大小衆多，制作一個響應式網頁，手機寬度越大字體越大，就像一張圖片一樣進行縮放。給大家分享一個rem的插件：

(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange': 'resize', recalc = function() { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if (clientWidth >= 560) { clientWidth = 560; } docEl.style.fontSize = 100 * (clientWidth / 750) 'px'; }; if (!doc.addEventListener) return; recalc(); win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!