頁面適配之pt px em rem用法和特點

1. pt

點（points），絕對長度單位。

印刷業上常使用的單位，磅的意思，一般用於頁面列印排版。

不知道經常做設計的同學知不知道zeplin這個**，它用的畫素單位都是pt。

1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

用法：div

2. px

相對長度單位。畫素（pixels）。畫素px是相對於顯示器螢幕解析度而言的。

div

相容性和pt一樣

px不會因為其它元素的尺寸變化而變化。

畫素的大小是會「變」的，也稱為「相對長度」，越高位的畫素，其擁有的色板也就越豐富，越能表達顏色的真實感。

px特點：比較穩定和精確，但在瀏覽器放大縮小會出現頁面混亂。

一般情況下，我們平時都是用px來定義字型，所以無法用瀏覽器字型放大的功能，ie無法調整那些使用px作為單位的字型大小。大部分**能調整是因為用了相對長度單位em或rem。如果改變了瀏覽器的縮放，web頁面樣式就會亂掉，這樣對於使用者來說，就是個大問題了。這時，就提出了相對長度單位。

firefox能夠調整px和em，rem，但是96%以上的中國網民使用ie瀏覽器(或核心)。

假設就使用瀏覽器預設的字型大小16px，來看一些px單位與rem之間的轉換關係:

如果你要設定乙個不同的值，那麼需要在根元素中定義，為了方便計算，時常將在元素中設定font-size值為62.5%:

html

相當於在中設定font-size為10px，此時，上面示例中所示的值將會改變：

3.em

相對長度單位。相對於當前物件內文字的字型尺寸。

如當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。

相對長度單位。畫素（pixels）。

div

相容性和pt一樣。

em特點：

（1）em的值並不是固定的

（2）em會繼承父級元素的字型大小

em表示相對于父元素的字型大小，em是相對單位，沒有乙個固定的度量值，而是由其它元素尺寸來決定的相對值。如當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。

任意瀏覽器的預設字型都是16px，所有未經調整的瀏覽器都符合：1em =16px。那麼12px = 0.75em；10px = 0.625em；為了簡化font-size的換算，需要在css中的body選擇器中宣告font-size=62.5%，這就使em值變為：16px*62.5% =10px；這樣12px=1.2em；10px=1em，也就是說只需要將你原來數值px除以10就可以了。

使用em的注意點：

1. body選擇器中宣告font-size=62.5%；

2. 將你的原來的px數值除以10，然後換上em作為單位；

3. 重新計算那些被放大的字型的em數值。避免字型大小的重複宣告。

4. rem

相對長度單位。相對於根元素(即html元素)font-size計算值的倍數。是css3新增的乙個相對單位（root em，根em）

div

rem可以做到只修改根元素就成比例地調整所有字型大小，又可以避免字型大小逐層復合的連鎖反應。

5. px、pt、em、rem轉化表：

pt=1/72(英吋) px=1/dpi(英吋) pt=px*dpi/72

以windows下的96dpi來計算，1pt=px*96/72=px*4/3

字型大小 pixels ems percent points

八號 6px 0.375em 37.5% 5pt

七号 7px 0.4375em 43.75% 5.5pt

小六 8px 0.5em 50% 6.5pt

9px 0.55em 55% 7pt

六號 10px 0.625em 62.5% 7.5pt

11px 0.7em 70% 8pt

小五 12px 0.75em 75% 9pt

13px 0.8em 80% 10pt

五號 14px 0.875em 87.5% 10.5pt

15px 0.95em 95% 11pt

小四 16px 1em 10% 12pt

17px 1.05em 105% 13pt

18px 1.125em 112.5% 13.5pt

四號 19px 1.2em 120% 14pt

20px 1.25em 125% 14.5pt

小三 21px 1.3em 130% 15pt

三號 22px 1.4em 140% 16pt

23px 1.45em 145% 17pt

小二 24px 1.5em 150% 18pt

6. 下面介紹下使用方法：

現在的使用方法很多，我直接介紹我偏向的這一種了

//sass

div//編譯後css

div2.rem在less中的使用方法，這是一種簡單的實現方式

2.gulp等各類打包工具

這個方法比較激進，打包時直接匹配px，強行轉為rem。

var replace = require('gulp-replace');

gulp.task('pxtorem', function()))

.pipe(gulp.dest('dir'));

});基於編輯器sublime text外掛程式cssrem

參考

頁面適配之pt px em rem用法和特點

移動端頁面適配之 vw

移動端頁面怎麼適配ios頁面

聊聊PC端頁面適配

頁面適配之pt px em rem用法和特點

移動端頁面適配之 vw

移動端頁面怎麼適配ios頁面

聊聊PC端頁面適配

相關推薦