因為自己也經常做移動端的開發工作，現總結一份頁面適配的筆記。

1. pt

點（Points），絕對長度單位。
印刷業上常使用的單位，磅的意思，一般用於頁面列印排版。
不知道經常做設計的同學知不知道zeplin這個網站，它用的畫素單位都是pt。
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
用法：

div { font-size:10pt; }

2. px

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

div { font-size:10px; }

相容性和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: 62.5%;
}

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

3.em

相對長度單位。相對於當前物件內文字的字型尺寸。
如當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。
相對長度單位。畫素（Pixels）。

div { font-size:10em; }

相容性和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 { font-size:10rem; }

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

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

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

1. rem在Sass中的使用方法

@function rem($values){
    $root :16px;
    $unit: rem;
    $list: ();
    @each $v in $values {
        $res:0;
        @if ($v == 0 or $v == auto or unit($v) == rem or unit($v) == em or unit($v) == vw or unit($v) == vh){
            $res: $v;
        }@else{
            $res: ($v + 0px) / $root + $unit;
       }
       $list : append($list , $res);
   }
   @return $list;
}

less也可以同理這麼寫一個

//SASS
div{
    margin:rem(10px 10rem 0 auto);
}
//編譯後CSS
div{
    margin:0.625rem 10rem 0 auto;
}

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

html{
    font-size:62.5%;
}
@baseFontSize:10;
.pxTorem(@name, @px){
  @{name}: @px / @baseFontSize * 1rem;
}
.pxTorem(@name, @px1 , @px2){
  @{name}: @px1 / @baseFontSize * 1rem @px2 / @baseFontSize * 1rem;
}
.pxTorem(@name, @px1 , @px2 , @px3 ){
  @{name}: @px1 / @baseFontSize * 1rem @px2 / @baseFontSize * 1rem @px3 / @baseFontSize * 1rem;
}
.pxTorem(@name, @px1 , @px2 , @px3 , @px4){
  @{name}: @px1 / @baseFontSize * 1rem @px2 / @baseFontSize * 1rem @px3 / @baseFontSize * 1rem @px4 / @baseFontSize * 1rem;
}

//LESS
div{
    .pxTorem(width,100);
    .pxTorem(height,100);
    .pxTorem(padding,10,20);
    .pxTorem(margin,10,20,30,40);
}
//編譯後 CSS
div{
    width:10rem;
    height:10rem;
    padding:1rem 2rem;
    margin:1rem 2rem 3rem 4rem;
}

7.其它方法

2.gulp等各類打包工具
這個方法比較激進，打包時直接匹配px，強行轉為rem。

var replace = require('gulp-replace');
gulp.task('pxToRem', function(){
  return gulp.src('*.html')
    .pipe(replace(/(\d+)px/g, function(match, p1){
        return Number(p1) / 10 + 'rem';
    }))
    .pipe(gulp.dest('dir'));
});

1. Idea 也有SCSS SASS LESS對應的自動轉換外掛