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

时间:2023-05-26 22:04:08

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 像素

抽象的单位, 主要使用在浏览器上, Web页面上的内容, 一般,CSS像素称为与设备无关的像素

DIPS  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