作為font-size的單位時，其代表父元素的字型大小，作為其他屬性單位時，代表自身字型大小
問題：1、chrom下有最小字型限制，必需為12px，所以這個值不能小於12
2、如果兩個一樣的元素，但是裡面字型不一樣，那就不能統一設定了。或者元素字型變化了，就又要統一設定一遍
css3新增的乙個相對單位，是相對於根元素html字型大小
em和rem都是相對單位，不同點在於em是相對於父級的font-size。而rem是相對於根節點html的font-size
通過瀏覽器f12檢視控制台可以看到iphone6的css畫素為375px
暫時設定html的font-size為100px（正常開發時是動態設定html根節點的字型大小）
子元素的寬度全部用rem設定
那麼所有子元素的css寬度 = 根節點字型大小 * 對應的rem
在上面的例子中
iphone6的css畫素為375px，此時header剛好佔滿螢幕，div為螢幕寬度的一半
iphone6plus的css畫素為414px
此時設定根節點html的字型大小為110.4px,子元素不作任何變化
此時可以意外的看到header仍然佔滿了螢幕寬度，div為螢幕寬度一半。
而我們卻只是改變了html的字型大小就實現了這樣的功能
子元素隨著html成比例變化
rem的布局原理就是通過動態改變根節點的字型大小，來影響所有設定了rem單位的子元素的大小，來保證元素大小和螢幕大小是成比例式的同步變化
那麼如何設定子元素為多少rem呢？
目前市面通常以iphone6作為標準，設計稿尺寸一般為750px以便於計算
![在這裡插入描述](
使用方法
ui設計師設計介面時建議以iphone6的兩倍尺寸（750px）為設計標準尺寸，前端開發在開發頁面先引用上述**塊，前端開發在選擇標註時仍按照標準px來標註，為了計算方便js**塊中乘以100，在css中為實際尺寸只／100（rem）。
rem設計方案
考慮問題 螢幕縮小是 時尺寸的問題 讓html的font size是乙個動態值 var viewwidth 750 var pick viewwidth 100 var mode resize function change document.getelementsbytagname html 0 ...
rem移動端設計方案
user scalable no 禁止使用者手指頭放大縮小 2.整體布局預設不設定寬度，預設100 自動填滿 3.父元素一般不設定高度，由子元素撐起來 4.移動端不考慮放大，考慮縮小 5.只設定width 100 其餘不用設定，自適應盒子的大小 6.文字依然以rem為單位，等比例的放大，縮小 htm...
TinyURL設計方案
現在貌似tinyurl很火爆，也逐漸成為一種流行趨勢。對應於php版本的tinyurl也有一些演算法，其實本質上來說是一種hash。除此之外，還有另外一種tinyurl方案 類似於http img.ly 其實這種設計 是最簡單的，沒有使用hash，而是遞增，這種的好 處就是資料庫 可以無限擴充套件，...