从淘宝适配布局谈移动端适配

最新推荐文章于 2023-07-03 19:49:03 发布

sobort

最新推荐文章于 2023-07-03 19:49:03 发布

阅读量3.5k

点赞数

一、首先我们先来看看淘宝不同分辨率下的适配页面

可以看出来，淘宝在不同的分辨率下，页面的尺寸和模块间的间距会发生变化，这是因为淘宝采用了rem，这篇文章会简单介绍淘宝的布局思路以及具体做法,不过在此之前我们先了解一些移动端的知识，以为更好的理解淘宝布局的方案，下面我们来看一些移动端的知识

二、了解一些移动端的知识
viewport的<meta>标签用法

其主要用来告诉浏览器如何规范的渲染Web页面，而你则需要告诉它视窗有多大

移动端开发中，通常我们都会采用<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">来设置viewport，那么viewport是什么样的原理控制页面适配呢？

所以在讲淘宝的具体做法之前，我们先来深入了解viewport

viewport是什么?

通俗来讲，移动端的viewport就是我们所能看到的手机端浏览器的可视窗口大小，但viewport又不仅仅局限于可视窗口的大小，一般情况下，它是比默认窗口大小要大的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动端正常显示为桌面浏览器而设计的网页，移动端的浏览器都会默认把自己的默认的viewport设为980px到1024px不等，但其后果就是会出现横向滚动条，因为移动端浏览器可视区域的大小是比默认的viewport宽度要小的。

不同的设备对1px有不一样的定义

在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。

在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素

以iphone6为例：

设备宽高为375×667，可以理解为设备独立像素(或css像素)。

dpr为2，根据上面的计算公式，其物理像素就应该×2，为750×1334。

用一张图来表现，就是这样：

关于三个viewport的理论

ppk大神对于移动设备上的viewport有着非常多的研究（第一篇，第二篇，第三篇），有兴趣的同学可以去看一下

ppk认为，移动设备上有三个viewport。包括layout viewport、visual viewprt、ideal viewport

layout viewport: 首先，移动设备上的浏览器认为自己必须能让所有的网站都正常显示，即使是那些不是为移动设备设计的网站。但如果以浏览器的可视区域作为viewport的话，因为移动设备的屏幕都不是很宽，所以那些为桌面浏览器设计的网站放到移动设备上显示时，必然会因为移动设备的viewport太窄，而挤作一团，甚至布局什么的都会乱掉。也许有人会问，现在不是有很多手机分辨率都非常大吗，比如768x1024，或者1080x1920这样，那这样的手机用来显示为桌面浏览器设计的网站是没问题的吧？前面我们已经说了，css中的1px并不是代表屏幕上的1px，你分辨率越大，css中1px代表的物理像素就会越多，devicePixelRatio的值也越大，这很好理解，因为你分辨率增大了，但屏幕尺寸并没有变大多少，必须让css中的1px代表更多的物理像素，才能让1px的东西在屏幕上的大小与那些低分辨率的设备差不多，不然就会因为太小而看不清。所以在1080x1920这样的设备上，在默认情况下，也许你只要把一个div的宽度设为300多px（视devicePixelRatio的值而定），就是满屏的宽度了。回到正题上来，如果把移动设备上浏览器的可视区域设为viewport的话，某些网站就会因为viewport太窄而显示错乱，所以这些浏览器就决定默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。ppk把这个浏览器默认的viewport叫做 layout viewport。这个layout viewport的宽度可以通过document.documentElement.clientWidth 来获取。

然而，layout viewport 的宽度是大于浏览器可视区域的宽度的，所以我们还需要一个viewport来代表浏览器可视区域的大小，ppk把这个viewport叫做 visual viewport。visual viewport的宽度可以通过window.innerWidth 来获取

如下所示便是layout viewport 和visual viewport的区别，简单明了吧

现在我们已经有两个viewport了：layout viewport 和 visual viewport。但浏览器觉得还不够，因为现在越来越多的网站都会为移动设备进行单独的设计，所以必须还要有一个能完美适配移动设备的viewport。所谓的完美适配指的是，首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；第二，显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，理想的情况是这段14px的文字无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。当然，不只是文字，其他元素像图片什么的也是这个道理。ppk把这个viewport叫做 ideal viewport，也就是第三个viewport——移动设备的理想viewport。

ideal viewport并没有一个固定的尺寸，不同的设备拥有有不同的ideal viewport。所有的iphone的ideal viewport宽度都是320px，无论它的屏幕宽度是320还是640，也就是说，在iphone中，css中的320px就代表iphone屏幕的宽度。

但是安卓设备就比较复杂了，有320px的，有360px的，有384px的等等，关于不同的设备ideal viewport的宽度都为多少，可以到http://viewportsizes.com去查看一下，里面收集了众多设备的理想宽度。

再总结一下：ppk把移动设备上的viewport分为layout viewport、visual viewport和ideal viewport三类，其中的ideal viewport是最适合移动设备的viewport，ideal viewport的宽度等于移动设备的屏幕宽度，只要在css中把某一元素的宽度设为ideal viewport的宽度(单位用px)，那么这个元素的宽度就是设备屏幕的宽度了，也就是宽度为100%的效果。ideal viewport 的意义在于，无论在何种分辨率的屏幕下，那些针对ideal viewport 而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户。

利用meta标签对viewport进行控制

移动设备默认的viewport是layout viewport，也就是那个比屏幕要宽的viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢？这就该轮到meta标签出场了。

在文章一开始我们就说，进行移动端开发时，我们一般都会加上这么一句：

该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。

这个name为viewport的meta标签到底有哪些东西呢，又都有什么作用呢？

meta viewport 标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对meta viewport的支持，事实也证明这个东西还是非常有用的。

在苹果的规范中，meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值)，如下：

width	设置layout viewport 的宽度，为一个正整数，或字符串"device-width"
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable	是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

把当前的viewport宽度设置为 ideal viewport 的宽度

要得到ideal viewport就必须把默认的layout viewport的宽度设为移动设备的屏幕宽度。因为meta viewport中的width能控制layout viewport的宽度，所以我们只需要把width设为width-device这个特殊的值就行了

通过width=device-width，所有浏览器都能把当前的viewport宽度变成ideal viewport的宽度

这样的代码看起来确实简单明了，不管你懂不懂viewport，都可以用这句进行移动端开发，可是很少有人知道

这句代码能达到和

一模一样的效果，也可以把当前的的viewport变为 ideal viewpor。觉得不太信的，你可以试试，不过这说明了什么呢？

从理论上来讲，这句代码的作用只是不对当前的页面进行缩放，也就是页面本该是多大就是多大。那为什么会有 width=device-width 的效果呢？

要想清楚这件事情，首先你得弄明白这个缩放是相对于什么来缩放的，因为这里的缩放值是1，也就是没缩放，但却达到了 ideal viewport 的效果，所以，那答案就只有一个了，缩放是相对于 ideal viewport来进行缩放的，当对ideal viewport进行100%的缩放，也就是缩放值为1的时候，不就得到了 ideal viewport嘛

但如果width 和 initial-scale=1同时出现，并且还出现了冲突呢？比如：

width=400表示把当前viewport的宽度设为400px，initial-scale=1则表示把当前viewport的宽度设为ideal viewport的宽度，那么浏览器到底该服从哪个命令呢？是书写顺序在后面的那个吗？不是。当遇到这种情况时，浏览器会取它们两个中较大的那个值。例如，当width=400，ideal viewport的宽度为320时，取的是400；当width=400， ideal viewport的宽度为480时，取的是ideal viewport的宽度。

最后，总结一下，要把当前的viewport宽度设为ideal viewport的宽度，既可以设置 width=device-width，也可以设置 initial-scale=1，但这两者各有一个小缺陷，就是iphone、ipad以及IE 会横竖屏不分，通通以竖屏的ideal viewport宽度为准。所以，最完美的写法应该是，两者都写上去，这样就 initial-scale=1 解决了 iphone、ipad的毛病，width=device-width则解决了IE的毛病：

三、淘宝的布局方案解析

有了上边的viewport的知识了解后，我们来剖析淘宝的viewport。淘宝触屏版布局的前提就是viewport的scale根据devicePixelRatio动态设置：

Galaxy S5:

iphone 5:

iphone 6 plus:

上图都是明晃晃的证据啊。我截取了dpr分别为1,2,3时的缩放比，不一样吧

这么做目的当然是为了保证页面的大小与设计稿保持一致了，比如设计稿如果是750的横向分辨率，那么实际页面的device-width，以iphone6来说，也等于750，这样的话设计稿上标注的尺寸只要除以某一个值就能够转换为rem了。

从淘宝适配布局谈移动端适配

通过js设置viewport的方法如下：

淘宝布局的第二个要点，就是html元素的font-size的计算公式，font-size = deviceWidth / 10:

从淘宝适配布局谈移动端适配

注：整个网页在设备内显示时的页面宽度就会等于设备逻辑像素大小，也就是device-width。这个device-width的计算公式为：设备的物理分辨率/(devicePixelRatio * scale)，在scale为1的情况下，device-width = 设备的物理分辨率/devicePixelRatio ，物理像素=逻辑像素* devicePixelRatio*scale

接下来要解决的问题是，元素的尺寸该如何计算，比如说设计稿上某一个元素的宽为150px，换算成rem应该怎么算呢？这个值等于设计稿标注尺寸/该设计稿对应的html的font-size。拿淘宝来说的，他们用的设计稿是750的，所以html的font-size就是75，如果某个元素是150px的宽，换算成rem就是150 / 75 = 2rem。

总结下淘宝的这些做法：

(1)动态设置viewport的scale

(2)动态设置html的font-size

(3)布局的时候，各元素的css尺寸=设计稿标注尺寸/设计稿横向分辨率/10

(4)font-size可能需要额外的媒介查询，并且font-size不使用rem

这些都是淘宝的布局方案，只是讲了一些布局思路，接下来我们具体了解flexible库以及看看它是怎么实现这些思路的

四. 淘宝移动端自适应方案—lib.flexible库解析

lib.flexible库是淘宝用来解决移动端页面终端适配的

这是github上flexible库的源码，需要就去clone吧 https://github.com/amfe/lib-flexible

它的主要js文件有三个，包括flexiblecss.js、flexible.js、makegrid.js

flexible.js—布局的核心js

flexiblecss.js—注入统一的css样式，比如去掉所有元素的内外边距，去掉默认边框等等

makegrid.js—栅格系统

怎么用lib.flexible库？引入flexible_css.js,flexible.js文件

更简单方便的，你可以直接使用阿里CDN：

PS:{{version}}换成相应的版本号，如{{0.3.2}}

建议对于js做内联处理，在所有资源加载之前执行这个js。执行这个js后，会在（也就是document.documentElement）上增加一个data-dpr属性和font-size样式。之后页面中的元素，都可以用rem单位来设置。html上的font-size就是rem的基准像素。JS会根据不同的设备添加不同的data-dpr值，比如说2或者3，同时会给html加上对应的font-size的值，比如说75px。如此一来，页面中的元素，都可以通过rem单位来设置。他们会根据html元素的font-size值做相应的计算，从而实现屏幕的适配效果。除此之外，在引入lib-flexible需要执行的JS之前，可以手动设置meta来控制dpr值，如：
<meta name="flexible" content="initial-dpr=2" />

其中initial-dpr会把dpr强制设置为给定的值。如果手动设置了dpr之后，不管设备是多少的dpr，都会强制认为其dpr是你设置的值。在此不建议手动强制设置dpr，因为在Flexible中，只对iOS设备进行dpr的判断，对于Android系列，始终认为其dpr为1。

flexible的实质

flexible实际上就是能过JS来动态改写meta标签，代码类似这样：

事实上他做了这几样事情：

•动态改写标签

•给元素添加data-dpr属性，并且动态改写data-dpr的值

•给元素添加font-size属性，并且动态改写font-size的值

把视觉稿中的px转换成rem

目前Flexible会将视觉稿分成100份，而每一份被称为一个单位a。同时1rem单位被认定为10a。针对我们这份视觉稿可以计算出：

1a = 7.5px

1rem = 75px

那么我们的视觉稿就分成了10a，也就是整个宽度为10rem，对应的font-size为75px；

这样一来，对于视觉稿上的元素尺寸换算，只需要原始的px值除以rem基准值即可。例如一个div尺寸为220px*100px,则其转化为rem的尺寸为2.9333rem * 1.33333rem。

推荐CSSREM——px转化rem小工具

在实际开发中，如果每一次计算px转换rem，或许会觉得非常麻烦，或许直接影响大家平时的开发效率。这里有一个px转换rem的小工具——CSSREM；

CSSREM是一个CSS的px值转rem值的Sublime Text3自动完成插件。我已经安装使用体验，只需要输入正常的px值，会自动换算成相应的rem值；如下图所示：

查看CSSREM如何安装，请参考：https://github.com/flashlizi/cssrem

文本字号应该用rem吗？

显然，我们在iPhone3G和iPhone4的Retina屏下面，希望看到的文本字号是相同的。也就是说，我们不希望文本在Retina屏幕下变小，另外，我们希望在大屏手机上看到更多文本，以及，现在绝大多数的字体文件都自带一些点阵尺寸，通常是16px和24px，所以我们不希望出现13px和15px这样的奇葩尺寸。

如此一来， rem并不适合用到段落文本上。所以在Flexible整个适配方案中，考虑文本还是使用px作为单位。只不过使用[data-dpr]属性来区分不同dpr下的文本字号大小。

总结下吧，字体慎用rem，误差太大了，因为不能满足任何屏幕下字体大小相同,所以建议标题类用rem，要求字体大小相同的部分还是用px

栅格系统—makegrid.js

栅格系统用于实现移动端列表型的需求，比如淘宝首页的分类模块：

首先引入makegrid.js

使用方法

lib.flexible.makeGrid(params)

• [Object params]

-designWidth - 设计稿宽度

- designUnit - 设计稿最小单位a（以px为单位）

-columnCount - 栅格列数

-columnXUnit - 栅格列宽（以a为单位）

-gutterXUnit - 栅格间距（以a为单位）

-edgeXUnit - 页面左右边距（以a为单位）

-className - 栅格样式的名称（可省略，默认为grid）

通过传入视觉的栅格规范定义，可以输出对应的css样式。 lib.flexible.makeGridMode(modeName) 方案还预置了几个默认的栅格规范，分别是750-12，750-6，640-12，640-6。

利用meta输出栅格样式

或

栅格代码举例

这是我用栅栏系统做的类似于淘宝首页的分类模块demo，不用像单纯用css实现那么麻烦，不用display：inline-block或者float，只是简单的应用类grid和col-n，简单的根据自己的需求调节间距，这大大便利了我们做列表型的需求，最重要的是不用担心在移动端的适配问题

最后大致看一下flexible.js里的主要源码，更加清晰前边的观点：

flexible.js—布局的核心js,里边主要包含下边几点来实现适配布局

1)设置像素比dpr和scale

有两种模式：一种是自适应，一种是手动配置dpr

适应模式：根据已有的meta标签来设置dpr和scale

手动配置：<meta name="flexible" content="initial-dpr=2,maximum-dpr=3" />

2）如果没有设置缩放比，根据苹果用户或者安卓用户设置缩放比。iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案，安卓的均采用1。

3）前边谈到淘宝布局方案的时候，说到淘宝触屏版布局的前提就是viewport的scale根据devicePixelRatio动态设置

4）为html标签添加data-dpr属性

document.documentElement.setAttribute('data-dpr', dpr);

5）刷新页面的rem基准值（API---lib.flexible.refreshRem()）

6)什么时候执行refreshRem()呢？

第一种当窗口大小发生变化，也就是触发resize事件的时候；

第二种是当重新载入页面时，判断是否是缓存，如果是缓存，执行refreshRem()

7)rem转化px （API---lib.flexible.rem2px([Number|String digital])）

rem转化px计算公式=d*(width/10)

8)px转化rem （API---lib.flexible.px2rem([Number|String digital])）

px转化rem计算公式=d/(width/10)

再一次最后，附上自己遇到的一些关于css布局适配问题：

1.盒子，图片等宽度设置首选百分比，次而选择rem，高度可以是固定值

2.字体可以不用rem，误差太大了，且不能满足任何屏幕下字体大小相同,所以建议标题类用rem，要求字体大小相同的部分还是用px；

3.遇到内容排列显示的布局，建议放弃float，可以直接使用display:inline-block。

4.慎用position属性；absolute会脱离文档流，relative则不会

5.如何解决盒子边框溢出？当你把元素宽度设为 width:100%时，有时可能会遇到元素的宽度超出了屏幕，这时可对元素加box-sizing:border-box属性，用来指定盒子大小包含边框和内边距

6.去除button在ios上的默认样式

-webkit-appearance: none; border-radius: 0;

7.不想让按钮touch时有蓝色的边框

outline:none;

8.去除webkit的滚动条

element::-webkit-scrollbar{

display: none;

}

9.遇到过一个问题就是，当手机端点击input弹出键盘，整个视窗的高度就会变为减去键盘的高度，页面底部样式会乱，当时解决方法是用js获取整个页面高度赋值给body，等于说在不同的设备下写死不同的body高度值，底部就不会乱了

$("body").css("height",parseInt($(".wrap").height())+parseInt($(".icon-main").height()));

10.如果想改变 placeholder里的文字，需要用c伪类

::-webkit-input-placeholder{

color:#ccc

}

希望这些大家有帮助。后续会写篇具体怎么应用到项目中~~~~~

未插入正文的图片或附件

标签：

给个赞 8 人点赞

收藏 15 人收藏

从淘宝适配布局谈移动端适配

评论已有 1 条评论；以下用户言论只代表其个人观点，不代表前端网（W3Cfuns）的观点或立场。

最新评论

从淘宝适配布局谈移动端适配

评论 已有 1 条评论；以下用户言论只代表其个人观点，不代表 前端网（W3Cfuns） 的观点或立场。

最新评论

评论已有 1 条评论；以下用户言论只代表其个人观点，不代表前端网（W3Cfuns）的观点或立场。