移动端适配方案(下)

时间 2019-11-06

标签移动适配方案栏目无线繁體版

原文原文链接

上一篇介绍了像素和视口这些基本概念，如今接着移动端的适配方案。css

推荐一篇文章：MobileWeb适配总结，里面说到的三种布局方法已经说的很详细，还分别作了demo，我就不作了，这里说说三种方案的原理以及我使用中的感觉，但愿各为互补，你们理解是最重要的。html

以前作过PC页面的人聊的最多的就是『兼容』，这是由于浏览器之间的差别引发的，再也不多说。而移动端是基本没有『兼容』的问题的，全是CSS3，简直不要太开心。但是『适配』问题随之而来。前端

什么是『适配』？作PC页面的时候，咱们按照设计图的尺寸来就好，这个侧边栏200px，那个连接50px的。但是，当咱们开始作移动端页面的时候，设计师给了一份宽度为640px的设计图。那么，咱们把这份设计图实如今各个手机上的过程就是『适配』。git

那么，咱们怎么开始呢？目前有三种方法：github

固定高度，宽度自适应web
固定宽度，viewport缩放浏览器
rem作宽度，viewport缩放app

这三种方法的核心都是视口的肯定，如今以实现这个设计图为例说明。布局

固定高度，宽度自适应

demoflex

这也是目前使用最多的方法，垂直方向用定值，水平方向用百分比、定值、flex都行。腾讯、京东、百度、天猫、亚马逊的首页都是使用的这种方法。

随着屏幕宽度变化，页面也会跟着变化，效果就和PC页面的流体布局差很少，在哪一个宽度须要调整的时候使用响应式布局调调就行（好比网易新闻），这样就实现了『适配』。

原理

这种方法使用了完美视口：

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

这样设置以后，咱们就能够不用管手机屏幕的尺寸进行开发了。

固定宽度，viewport缩放

demo

设计图、页面宽度、viewport width使用一个宽度，浏览器帮咱们完成缩放。单位使用px便可。

目前已知荔枝FM、网易新闻在使用这种方法。有兴趣的同窗能够看看是怎么作的。

原理

这种方法须要根据屏幕宽度来动态生成viewport，生成的 viewport 基本是这样：

<meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">

640 是咱们根据设计图定下的，0.5 是根据屏幕宽度动态生成的。

生成的viewport告诉浏览器网页的布局视口使用 640px，而后把页面缩放成50%，这是绝对的等比例缩放。图片、文字等等全部元素都被缩放在手机屏幕中。

这个gif图说明了一切：

rem作宽度，viewport缩放

demo

这也是淘宝使用的方案，根据屏幕宽度设定 rem 值，须要适配的元素都使用 rem 为单位，不须要适配的元素仍是使用 px 为单位。

具体使用方法见使用Flexible实现手淘H5页面的终端适配

使用这个方法的库：

原理

实际上作了这几件事情：

动态生成 viewport
屏幕宽度设置 rem的大小，即给<html>设置font-size
根据设备像素比（window.devicePixelRatio）给<html>设置data-dpr

这么设置的好处是可让不一样设备的rem或px都显示同样的长度。

设置rem

设置rem的意义在于获得一个与屏幕宽度相关的单位，原本vw是最合适的，可是应该兼容性的问题，只能使用rem来作。这样，让不一样设备的rem显示同样的长度。

vw是CSS3引入的单位，1vw = 1%窗口宽度

上面的布局咱们能够这样：

html{
    font-size: 屏幕宽度 / 10; 
}
.btn{
    width:8.75rem;
    height:1.25rem;
}

这样，不管屏幕宽度是多少，.btn都是相对于屏幕的这么宽，作到了适配。

设置 viewport 缩放和 data-dpr

这两个设置实际上是干的一件事，就是适配高密度屏幕手机的px单位。

[data-dpr="2"] {
  font-size: 26px;
}
[data-dpr="3"] {
  font-size: 39px;
}

而缩放是动态的，这样，不一样设备下的px显示同样的长度。

设备像素比是2，缩放为0.5，data-dpr为2；设备像素比是3，缩放为0.3333，data-dpr为3。

总结

坦白说，我不以为第一种方案能就作『适配』方案，由于太笨了，只能作一些列表等简单排列的样式。

可是一些复杂的活动页的布局，用它可能就力不从心了：

这是我曾经作过的一个页面，『PK』要和左右两张图平行，并且下面的『不怒自威』、『义薄云天』和下面的战斗力位置都要固定，不能有差。若是用第一种方案，可能各个元素就要绝对定位，而后各类百分比来定位了。且不说计算麻烦，并且辛苦一番最后的结果尺寸是和设计图有出入的。

可是，第二种和第三种方案就绝对不会有这种状况，不会和设计图有差。再说第二种和第三种方案的区别，目前我惟一知道的区别就是第三种方案更加灵活，有两种单位可使用，想让元素适配的时候就用rem，想让文字不缩放的时候就用px。

若是你没有明白我以上讲的，多是我太啰嗦了，这是我在团队内分享时作的PPT，应该没那么啰嗦了。固然你也能够看看下面的那些文章，不过最好的理解方式就是用这些方案作几个页面，到时候就明白了。

其余文章

这两篇文章看着简单，尤为是上一篇讲视口，花费了将近一周的时间去翻阅资料。原本觉得很简单的东西，才发现有那么多名堂。好了，后天年会，祝我中大奖吧。

个人博客，欢迎订阅

微博粉丝太少，求粉