多屏适配解决方案

多屏适配初步方案
1、确定设计稿(以iphone为例)
由上图可知iPhone6为基准,及设计稿出750*1334px,物理尺寸:375*667
2、高清屏与普通屏的设备像素比不同,如何确保图片不失真,文字大小一致。
图片:图片不失真的具体方案,不同像素比下,引用不同图片
多屏适配解决方案_第1张图片

但是,我们需要考虑,如何保持图片容器大小一致。写死宽高,显然不是最佳方法。缩放,对这是个不错的方法;可是接下来,文字缩放,显然会变得很小,这时候rem就派上了用场,我们可以设置不同的根元素的font-size(rem)
多屏适配解决方案_第2张图片

ok接下来实践一下,如下图,基本达到预期
多屏适配解决方案_第3张图片

其他:
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;

多屏适配解决方案_第4张图片

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

CSS单位rem:rem就是相对于根元素的font-size来做计算
CSS单位em:em就是相对于元素的font-size来做计算
如下图:多屏适配解决方案_第5张图片


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

你可能感兴趣的:(多屏适配解决方案)