淘寶 rem 機制入門學習

一 移動設備尺寸多種多樣，帶來適配難度，有時甚至無從下手。
1 移動設備上的Px 像素不等於設備的物理像素。
iphone 6 做爲開發標準設備不等於設備的物理像素。
iPhone 5 物理寬度320
iPhone6s 物理寬度爲414
Android 設備物理寬度在iphone設備的寬度範圍以內或者附近
物理像素不等於css px像素，由於有retina屏，甚至3倍 retina屏。
retina屏幕 一個物理像素等於兩個CSS像素
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
移動端頁面，首先必學申明 viewport屬性 ，告知頁面咱們使用設備的寬度等於咱們處理頁面的整寬度。

二 淘寶flexible 解決方案，全部移動設備全兼容，贊
1 首先，引入
<script src="http://g.tbcdn.cn/mtb/lib-fle...

2會給html標籤添加 data-dpr="2" 根據設備添加 屏幕像素比，區分普通屏幕 retina屏幕 3倍retina屏
html font-size會設置爲屏幕寬度的十分之一，不一樣設備不同，可是都是十分之一。

3 rem 技術方案
全部元素的尺寸大小，邊距，行高 等於都是用了rem 相對寬度來表達
整個頁面的寬度是 10rem 1rem就等於屏幕寬度十分之一 這樣就爲不一樣移動設備頁面開發帶來了方便的等比縮放能力。全部元素的大小設定都使用針對html標籤的font-size 比例來計算。
1rem=html font-size =screen width /10 = flexible.js 提供

三 如何計算元素大小，寬高
1rem = 屏幕寬度/10
在現實之中，設計師是按照750像素寬度來設計頁面的。
由於理想的機型是iPhone 6 375dp 物理像素的寬 ，retina屏就是750px(css)
750px=10rem 針對設計稿

咱們使用PS 量出的像素/750*10 = 最終的rem
Photoshop像素/75 = em

http://www.w3cplus.com/mobile...