多屏适配解决方案

多屏适配初步方案

1、确定设计稿（以iphone为例）

由上图可知iPhone6为基准，及设计稿出750*1334px，物理尺寸：375*667

2、高清屏与普通屏的设备像素比不同，如何确保图片不失真，文字大小一致。

图片：图片不失真的具体方案，不同像素比下，引用不同图片



但是，我们需要考虑，如何保持图片容器大小一致。写死宽高，显然不是最佳方法。缩放，对这是个不错的方法；可是接下来，文字缩放，显然会变得很小，这时候rem就派上了用场，我们可以设置不同的根元素的font-size（rem）



ok接下来实践一下，如下图，基本达到预期



其他：

less的变量、Mixin、函数可以提高写样式效率；

在JavaScript中，可以通过window.devicePixelRatio获取到当前设备的dpr。

var dpr, rem, scale;
var docEl = document.documentElement;
var metaEl = document.querySelector('meta[name="viewport"]');
dpr = window.devicePixelRatio || 1;
rem = docEl.clientWidth * dpr / 10;
scale = 1 / dpr;
//
//          // 设置viewport，进行缩放，达到高清效果
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
// 设置data-dpr属性，留作的css hack之用
docEl.setAttribute('data-dpr', dpr);

而在CSS中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同dpr的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。

图片的统一替换：（此处以1、2、3为分界点）

var lowres,images = $('img');
if(window.devicePixelRatio > 1 && window.devicePixelRatio < 3) {
images.each(function(i) {
var lowres = $(this).attr('src');
var highres = lowres.replace(".", "@2x.");
$(this).attr('src', highres);

});
} else if(window.devicePixelRatio >= 3) {
images.each(function(i) {
var lowres = $(this).attr('src');
var highres = lowres.replace(".", "@3x.");
$(this).attr('src', highres);
})
}

一些基本概念：

视窗 viewport

简单的理解，viewport是严格等于浏览器的窗口。在桌面浏览器中，viewport就是浏览器窗口的宽度高度。但在移动端设备上就有点复杂。

移动端的viewport太窄，为了能更好为CSS布局服务，所以提供了两个viewport:虚拟的viewportvisualviewport和布局的viewportlayoutviewport。

meta标签

标签有很多种，而这里要着重说的是viewport的meta标签，其主要用来告诉浏览器如何规范的渲染Web页面，而你则需要告诉它视窗有多大。在开发移动端页面，我们需要设置meta标签如下：

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

代码以显示网页的屏幕宽度定义了视窗宽度。网页的比例和最大比例被设置为100%。

物理像素(physical pixel)

物理像素又被称为设备像素，他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。

设备独立像素(density-independent pixel)

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

CSS像素

CSS像素是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。一般情况之下，CSS像素称为与设备无关的像素(device-independent pixel)，简称DIPs。

屏幕密度

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

设备像素比(device pixel ratio)

设备像素比简称为dpr，其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到：

设备像素比 ＝ 物理像素 / 设备独立像素

如下图所示，某元素的CSS样式：width: 2px;height: 2px；



在不同的屏幕上，CSS像素所呈现的物理尺寸是一致的，而不同的是CSS像素所对应的物理像素具数是不一致的。在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素。

CSS单位rem：rem就是相对于根元素的font-size来做计算

CSS单位em：em就是相对于元素的font-size来做计算

如下图：


感谢：https://github.com/amfe/article/issues/17