Amfe阿里无线前端团队双11技术连载之际,一个实战案例来展示多终端适配.
Device metrics
1.0 mdpi
2.0 xhdpi
3.0xxhdpi(iphone 6 plus)
手淘h5要试配的终端设备数据
只出一套IOS平台设计稿， 但随着iphone 6 iphone6+的出现，从此终端tdsgukjg已不再是ANdroid系列了，ipo
iphone 6 750*1134
iphone 6 plus 414*736
设计师和前端开发之间又应彩什么协作模式？
选择一种尺寸作为设计和开发基准
定义一套适配规则，自动适配剩下的两种尺寸（你懂的）
特殊配适效果给出设计效果。
手淘设计师常选择iphone6 作为基准设计
交互给前端的是750*1334
自动适配到其它规则
前端开发完成终端适配方案
flexible 方案
视窗viewport
viewport 严格等于浏览器的窗口，有点复杂
移动端的viewport太窄， 为了能更好为css布避服务，
两个view port
viewportvisualviewport和布局的 viewportlayoutviewport
虚拟， 布局
这两个概念
ppk 写的相关教程
物理像素
设备像素
物理部件颜色和亮度，微小距离
设备独立像素（density-independent pixel）
密度无关像素， 一个点， 由程序使用的虚拟像素养.
相关系统转换为物理像素
css 像素
抽象的单位， 主要使用在浏览器上， Ｗeb页面上的内容， 一般，CSS像素称为与设备无关的像素
ＤＩＰＳ device-independent pixel
屏幕密度
像素数量， 每英寸有多少像素来计算
设备像素比 device pixel ratio
dpr
设备像素比 ＝ 物理像素/设备独立像素
window.devicePixelRatio 当前设备的dpr.
-webkit-device-pixel-ratio
-webkit-min-device-pixel-ratio
-webkit-max-device-pixel-ratio
dip dp 设备独立像素 与屏幕密度有关。dip 可以
用来辅助区分视网膜设备还是非视网膜设备
css pixel Standard Retian
Eevice pixel
275pt*667pt 设备独立像素 dpr为2
物理像素养 750*1334
在不同的屏幕上 css 像素所呈现的物理尺寸
是一致的， 而不同的是css像素所对应的物理像素养
是不一致的。
Layout 之外
图片的试配
内容是什么格式的
放在两倍的图片新版本
imageOption 优化图片文件的大小
手动优化细节，
两个版本的图片
css 背景图？
IMG标签， 转换成css 背景的图片。
IMG标签上加上原图的宽高。
网页的比例和最大比例被设置为100%；
CSS 单位ren
font size of the root element
相对于根元素的html 的font-size来计算
lig-flexible 的库
制作h5适合的开源库， Javascript 和 Css 文件
data-dpr 属性， 以及一个font-size 样式。
data-dpr值 font-size:75px.
<meta name="flexible" content="initial-dpr=2" />
默认设置的值
对于Android ， 认为dpr 为1
动态改写meta 标签
给html元素加 data-dpr属性, 并且动态改写data-dpr的值
font-size属性 并且动态改写 font-size