使用Flexible 实现手淘H5 页面的终端适配学习

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