@H_502_0@
阅读目录
-
- 方法,3个步骤
- 图片的处理
适配的要求
@H_502_0@1、在不同分辨率的手机上,页面看起来是自适应的。整体效果看起来比较和谐。不会说大屏幕上看起来特别小。小屏幕上看起来特别大 @H_502_0@2、主要是关注字体,宽高,间距,图片大小等。 @H_502_0@3、所提供的设计图一般是手机分辨率的两倍,才能方便做适配。 @H_502_0@4、使用rem做单位,而不是传统的px @H_502_0@适配的方法,3个步骤
@H_502_0@步骤1: @H_502_0@设置viewport,也就是平时写移动端页面都要加上的:步骤3:
页面上我们的css代码可以这样写,比如设计图给我们的尺寸是750*1000的。某个容器在设计图的宽度是150px*225px,那我们在css里面
宽度:150px/750px/10=150px/75px=2rem;
高度为:225px/75px=3rem;
一句话:布局的时候,各元素的css尺寸=设计稿标注尺寸/设计稿横向分辨率/10;
通过上面的3个步骤,我们就可以将我们的移动端页面做成适配的了。
css换算方法
不过有一点,一直算来算去挺烦的。所以在写css的时候,最好使用css预处理器,比如sass、less来写,这样就方便很多了。
或者在sublimeText3中安装cssREM插件,正常书写px单位,然后编辑器自动帮你换算成rem.
@H_502_0@注意点: @H_502_0@容器的宽度高度我们用rem为单位,但是字体大小font-size我们还是用px,而不是用rem @H_502_0@原因: @H_502_0@flexible.js的作者winter是这样解释的:考虑到字体的点阵信息,一般文字尺寸多会采用 16px 20px 24px等值,若以rem指定文字尺寸,会产生诸如21px,19px这样的值,会导致字形难看,毛刺,甚至黑块,故大部分文字应该以px设置。 @H_502_0@一般标题类文字,可能也有要求随屏幕缩放,且考虑到这类文字一般都比较大,超过30px的话,也可以用rem设置字体。 @H_502_0@下面粘贴一下flexible.js的源码:加了注释 @H_502_0@flexible.js适配中背景图片的处理
@H_502_0@1、如何使用background-size @H_502_0@因为是使用了rem来做单位,我们在写移动端的背景图的时候,一般使用background-size来控制大小,那要怎么来换算呢? @H_502_0@换算单位如下: @H_502_0@background-size=背景图的大小/该设计图的宽度*10 @H_502_0@打个比方:我的背景图是16*18,设计图是按照640的宽度来设计的。那么我的background-size值为 @H_502_0@background-size: 16/640*10rem 16/640*10rem 也就是 background-size:0.25rem 0.28125rem; @H_502_0@通过这样控制之后,我们的背景图也做到了适配的效果 @H_502_0@2、雪碧图的适配!!!! @H_502_0@刚开始做适配的时候,有一件事是比较头疼的,那就是雪碧图的适配,主要是background-size和background-position的配置比较烦。那么怎么进行在使用fexible.js的时候适配雪碧图呢,方法如下: @H_502_0@假如我有下面这张雪碧图,设计图给我的是按640的分辨率来做的。 @H_502_0@这张雪碧图的大小为200px*458px @H_502_0@假设现在我们要用的那个勋子的背景图。分为以下几步: @H_502_0@1、测量勋字这张背景图的大小,大小为:75px*85px @H_502_0@2、测量这个勋字在雪碧图的位置,也就是设置background-position:.经测量,他在雪碧图的位置为 x:-123px,y:-7px @H_502_0@3、对着张雪碧图进行换算:看下面代码: @H_502_0@知道了上面的尺寸,我们就行换算即可,将每个值除以640再乘以10 为什么这么算,可以看看源码 @H_502_0@要使用这样雪碧图:
@H_502_0@css:
适配的原理解析
先来了解一些概念
在进行分析之前,首先得知道下面这些关键性基本概念(术语)。
物理像素(physical pixel)
物理像素又被称为设备像素,他是显示设备中一个最微小的物理部件。一个物理像素是显示器(手机屏幕)上最小的物理显示单元,在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值。
其实可以类比为分辨率。打个比方,一张图片有n多个很小很小个格子组成。
设备独立像素(density-independent pixel)
设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如: css像素),然后由相关系统转换为物理像素。
所以说,物理像素和设备独立像素之间存在着一定的对应关系,这就是接下来要说的设备像素比。
可以理解为css像素,比如宽度为20px等等。
设备像素比(device pixel ratio ),简称dpr
设备像素比(devicePixelRatio简称dpr)定义了物理像素和设备独立像素的对应关系,它的值可以按如下的公式的得到:
设备像素比 = 物理像素 / 设备独立像素
在javascript中,可以通过window.devicePixelRatio获取当前设备的dpr
css中的px可以看做是设备的独立像素,所以通过devicePixelRatio,我们可以知道该设备上一个css像素代表多少个物理像素。
例如,在Retina屏的iphone上,devicePixelRatio的值为2,也就是说1个css像素相当于2个物理像素。
再举个例子:iphone6中:
设备宽高为375×667,可以理解为设备独立像素(或css像素)。
dpr为2,根据上面的计算公式,其物理像素就应该×2,为750×1334。
@H_502_0@理解了上面的概念,就比较好理解它的实现原理了 @H_502_0@理解它的原理有两点: @H_502_0@1、了解利用Meta标签对viewport进行控制 @H_502_0@我们可以看看我们通常在head里面加的Meta标签页面和flexible.js源码解析:
@H_502_0@第一个要点: @H_502_0@淘宝触屏版布局的前提就是viewport的scale根据devicePixelRatio(设备像素比) 动态设置: @H_502_0@设备像素比的简单介绍:来看一下flexible.js源码:
根据不同的像素设备比,来对页面进行不同的缩放。页面缩放的 scale=1/dpr ;
@H_502_0@三星galasy S4 @H_502_0@data-dpr=1,所以 initial-scale=1 (因为源码上 scale = 1 / dpr;) @H_502_0@iPhone5: @H_502_0@data-drp=2,所以initial-scale=0.5 @H_502_0@iphone 6 Plus @H_502_0@第二个要点: @H_502_0@动态设置html的font-size,html元素的font-size的计算公式,font-size = deviceWidth / 10。我们也可以看到上面三张截图的html里面的font-size是不同的 @H_502_0@源码如下: