開發者可以通過設計稿基準寬度計算頁面元素 rpx 值，設計稿 1px 與框架樣式 1rpx 轉換公式如下：
設計稿 1px / 設計稿基準寬度 = 框架樣式 1rpx / 750rpx
750 * 元素在設計稿中的寬度 / 設計稿基準寬度
tips
rpx不支援動態橫豎屏切換計算，使用rpx建議鎖定螢幕方向
設計師可以用 iphone6 作為視覺稿的標準。
為支援跨平台，框架建議使用flex布局，關於flex布局可以參考外部文件
a complete guide to flexbox（
阮一峰的flex教程
1.1em的理解
1em並不是固定等於多少畫素的，而是根據元素的字型大小而定，如果是等寬字型（即每個字元的寬度都是一樣的），1em就是1個字元的寬度，如果是比例字型（通常只有英文本型才有）則1em等於英文大寫字母「m」的寬度。
（1）設定body的font-size
很多前輩在多年的實踐中得出乙個經驗，他們建議我們在body中設定乙個正文文字所需的字型大小，或者設定為「10px」，相當於（「0.625em或62.5%」），這樣為了方便其子元素計算。這兩種都是可取的。但是我們都知道，body的預設字型是「16px」，同時我們也很清楚了，我們改變了他的預設值，要讓彈性布局不被打破，就需要重新進行計算，重新進行調整。所以完美的設定是：
body可是在那個沒人愛的ie底下，「em」會有乙個問題存在。調整字型大小的時候，同樣會打破我們的彈性布局，不過還好，有乙個方法可以解決：
html需要轉換的畫素值 ÷ 父元素的font-size = em值元素自身要是設定了字型大小後，其計算公式就不在是前面所說的，我們需要做一下修改：
1、字型計算公式依舊
1 ÷ 父元素的font-size × 需要轉換的畫素值 = em值1 ÷ 元素的font-size × 需要轉換的畫素值 = em值1.瀏覽器的預設字型大小是16px
2、如果元素自身沒有設定字型大小，那麼元素自身上的所有屬性值如「boder、width、height、padding、margin、line-height」等值，我們都可以按下面的公式來計算
1 ÷ 父元素的font-size × 需要轉換的畫素值 = em值1 ÷ 父元素的font-size × 需要轉換的畫素值 = em值1 ÷ 元素自身的font-size × 需要轉換的畫素值 = em值相容性：
目前，ie9+，firefox、chrome、safari、opera 的主流版本都支援了rem。
就算對不支援的瀏覽器，應對方法也很簡單，就是多寫乙個絕對單位的宣告。這些瀏覽器會忽略用rem設定的字型大小。
使用%單位方便使用
css中的body中先全域性宣告font-size=62.5%，這裡的%的演算法和rem一樣。
因為100%=16px，1px=6.25%，所以10px=62.5%，
這是的1rem=10px，所以12px=1.2rem。px與rem的轉換通過10就可以得來，很方便了吧！
使用方法
注意，rem是只相對於根元素htm的font-size，即只需要設定根元素的font-size，其它元素使用rem單位設定成相應的百分比即可；
css中的flex布局
flex布局為 彈性盒布局 用彈性布局的方式有極大的靈活性，任何元素都可以使用flex布局，不管是行內元素或者是快級元素任何乙個容器都可以作為flex布局。box1 主軸的方向 即子元素的排序方向。橫向 反向橫向 豎向 反向豎向。flex direction row row reverse colu...
css布局之flex布局
網頁布局 layout 是css的乙個重點應用。布局的傳統解決方案，基於盒狀模型，依賴 display屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。2009年，w3c提出了一種新的方案 flex布局，可以簡便 完整 響應式地實現各種頁面布局。目...
CSS中的flex（彈性布局）
父標籤 display flex flex direction row row reverse 橫向 起點方向 rolumn rolumn reverse 縱向 flex wrap nowrap wrap wrap reverse 換 況 flex flow direction 與 wrap 結合 ...