移动端适配方案

视窗(viewport)

简单理解viewport就是浏览器窗口大小。在桌面浏览器中,viewport就是浏览器窗口的高度和宽度。在移动设备中,由于移动端的viewport太窄,为了更好为CSS布局服务,所以提供了两个viewport。

虚拟viewportvisual viewport
布局viewportlayout viewport

物理像素 physical pixel

物理像素也被称为设备像素,他是显示设备中一个最小的物理设备,物理像素单位。每个像素可以根据操作系统设置自己的颜色和亮度。

设备独立像素 device-independent pixel - 逻辑像素

设备独立像素也称为密度无关像素,可以认为是计算机坐标系统中的一个点,这个点代表一个可以程序使用的虚拟像素,比如CSS像素,然后由相关系统转换为物理像素。

CSS像素(与设备无关像素 device-independent piexl)

一个抽象单位,主要使用在浏览器上,用来精确度量Web页面上点内容。一般CSS像素称为与设备无关的像素(device-independent piexl),DIPs。

屏幕密度

屏幕密度是指一个设备表面上存在的像素数量,通常以每英寸有多少像素来计算(PPI)

设备像素比(device pixel ratio)

设备像素比简称为dpr,定义了物理像素和设备独立像素之间的对应关系

设备像素 = 物理像素 / 设备独立像素

  • 在JavaScript中,可以通过window.devicePiexlRatio获取当前设备的dpr。
  • 在css中,可以通过-webkit-device-piexl-ratio-webkit-min-device-piexl-ratio-webkit-max-device-piexl-ratio进行媒体查询。

常见终端设备参数

常见设备终端
终端设备的参数

UI设计与前端开发适配的协作

选择一种尺寸作为设计和开发的基准,定义其余尺寸的适配规则,对于特殊适配给出设计效果

淘宝手淘团队适配协作模式
淘宝手淘团队适配协作模式

视觉稿

在开发之前,UI设计师提供含有标注的PSD文件,为视觉稿。
对于移动端而言,为了做到页面高清的效果,视觉稿会遵循以下两点:

  1. 选取一款手机的屏幕宽度最为基准,iphone6(375pt * 667pt)
  2. 对于retina屏幕(如dpr = 2),为了达到高清的效果,视觉稿的画布大小会是基准2倍,也就是说像素点个数是原来的4倍。

iphone6:
dpr:2
设备独立像素:375pt * 667pt (设备宽度为375pt,设备高度667pt)
物理像素:750pt * 1334pt

视觉稿按照设备独立像素设计,放大两倍
UI设计师常选择iPhone6作为基准设计尺寸,交付给前端的设计尺寸是按750px * 1334px为准(高度会随着内容多少而改变)。前端开发人员通过一套适配规则自动适配到其他的尺寸。

位图像素
一个位图像素是栅格图像最小的数据单元,如png、jpg、gif等。每一个位图像素都包含着一些自身的显示信息,包括显示位置、颜色值、透明度等

理论上,一个位图像素对应一个物理像素,图片才能得到完美清晰的展示。
在Retina屏幕下,一个位图像素对应4个物理像素。由于单个位图像素不可以在分割,所以只能就近取色,就会出现位图像素点不够,从而导致图片模糊。

rem单位

font size of the root element.

rem就是相对于根元素<html>font-size来做计算。而我们的方案中使用rem单位,是能轻易的根据的font-size计算出元素的盒模型大小。

em是根据父元素的font-size计算。

flexible的实质

flexible实际上就是通过JS来动态改写meta标签

1
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

源代码:

1
2
3
4
5
6
7
8
9
10
11
var meta = document.createElement('meta');
var scale = isRetina ? 0.5 : 1;
meta.setAttribute('name', 'viewport');
meta.setAttribute('content', 'initial-scale=' + scale + ' ,maximun-scale=' + scale + ' ,minimum-scale=' + scale + ' ,user-scalable=no, width=device-width');
if(document.doucmentElement.firstElementChild) {
document.doucmentElement.firstElementChild.appendChild(meta);
} else {
var wrap = document.createElement('div');
wrap.appendChild(meta);
document.write(wrap.innerHTML);
}

  • 动态改写<meta>标签
  • html标签上加上data-dpr属性,并且动态改写data-dpr的值。
  • html标签上加上font-size属性,并且动态改写font-size的值。

<meta>initial-dpr会把dpr强制设置为给定的值。如果手动设置了dpr之后,不管设备是多少dpr,都会强制设置其dpr为你设置的值。不建议设置这个meta标签值(initial-dpr),因为在flexible中,只有对iOS设备进行dpr的判断,对于Android系列,始终认为其dpr1

px和rem转换

目前Flexible会将设计稿分成100份,为了更好的兼容vw和vh,同时1rem单位被认定为10a。

1
2
3
4
width为750px设计稿
750px = 100vw = 100a
1rem = 10a
1rem = 75px

我们设计稿都是750px宽度,分成10份,每份为10a(10vw),也就是整个宽度为10rem,所以html对应的font-size为75px。

参考文档

# HTML

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×