移动webapp适配方案大全

来源：互联网发布：mac有风扇声音很大编辑：程序博客网时间：2024/04/30 07:08

移动端开发的业务如今发展到已经占据互联网公司的大半壁江山，已经成为互联网公司的核心发展点。APP的和H5配合的混合开发模式已经是注流，那么在开发H5移动端的时候我们应该怎么做？而且做出来的产品是怎么适配个个不同的设备资源的？这个问题一直在大家注的重点。那今天我们就来聊聊这些事情.

首先做移动端页面时引入的meta标签，这里的个个参数都是什么意思，这个就不在这里详细说了，网上也有相应的资料可查看，这里主要说下引入适配的方案。

一、CSS3 Media Queries

实现原理是：通过CSS3中的Media Queries添加不同的媒体类型的表达式用来检查媒体是否符合某些条件，如果媒体符合相应的条件，那么就会调用对应的样式表。换句简单的说，“在CSS3中我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表。其实就如同做了一些if判断一样，找到对应的屏幕大小后就会加载对应的CSS来适配不同的手机大小

一般设置如下：

安卓

/*240px的宽度*/

/*360px的宽度*/

/*480px的宽度*/

ios:

@media only screen and (min-device-width: 320px){
//针对iPhone 3
}
@media only screen and (min-device-width: 320px)and (-webkit-min-device-pixel-ratio: 2) {
//针对iPhone 4, 5c,5s, 所有iPhone6的放大模式，个别iPhone6的标准模式
}
@media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 2) {
//针对大多数iPhone6的标准模式
}

@media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 3) {
//针对所有iPhone6+的放大模式
}
@media only screen and (min-device-width:412px) and (-webkit-min-device-pixel-ratio: 3) {
//针对所有iPhone6+的标准模式,414px写为412px是由于三星Nexus 6为412px，可一并处理

}

Media Queries的这种适配方法的缺点很明显，要做各种设置大小的判断来判断加载不同的css,第一点是很麻烦会写很多个，第二个就是维护比较复杂化，第三点就是在安卓机的机型众多的情况下对于一些不规则机型的大小很难把握。

二、百分比法

实现原理：以设计稿整体大小100%来等分，根据页面当中的元素计算比例。把 margin、padding等值也都设置成对应的百分比值，这种实现方式只能对一些简单的布局来讲可以，一旦布局复杂的应用，在不同的机型，尤其是安卓机上面会有一定的差异。像margin和padding值的设置。而且字体的大小还需要用CSS3 media的一些设置才行。

三、rem适配

rem是一个css单位，近一两年开始崭露头角，有许多同学对rem的评价不一，有的在尝试使用，有的在使用过程中遇到坑就弃用了。但是rem综合评价是用来做webapp它绝对是最合适的方式之一。

1) 概念：

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

2）关于布局：

1.流式布局（百分比法）

此解决方案有不少弊端，它虽然可以让各种屏幕都适配，但是显示的效果极其的不好，因为只有几个尺寸的手机能够完美的显示出视觉设计师和交互最想要的效果，但是目前行业里用流式布局切web app的公司还是挺多的，如：亚马逊携程兰亭等，他们在页面布局的时候都是通过百分比来定义宽度，但是高度大都是用px来固定住，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调，这就是流式布局的最致命的缺点，往往只有几个尺寸的手机下看到的效果是令人满意的，其实很多视觉设计师应该无法接受这种效果，因为他们的设计图在大屏幕手机下看到的效果相当于是被横向拉长来一样。

第二点就是：通过大量的百分比布局，会经常出现许多兼容性的问题，还有就是对设计有很多的限制，因为他们在设计之初就需要考虑流式布局对元素造成的影响，只能设计横向拉伸的元素布局，设计的时候存在很多局限性

2.固定宽度

固定页面宽度的做法，早期有些网站把页面设置成320的宽度，超出部分留白，这样做视觉，前端都挺开心，视觉在也不用被流式布局限制自己的设计灵感了，前端也不用在搞坑爹的流式布局。但是这种解决方案也是存在一些问题，例如在大屏幕手机下两边是留白的，还有一个就是大屏幕手机下看起来页面会特别小，操作的按钮也很小，手机淘宝首页起初是这么做的，但近期改版了，采用了rem。

3.响应式（Media Queries）

关于这种布局上面已经讲的很详细，这里不再多说。主要补充下它的缺点是：兼容各种设备工作量大，效率低下代码累赘，会出现隐藏无用的元素，加载时间加长，其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果，一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

3）rem实现原理

rem是通过根元素进行适配的，网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小。举个例子：

html{font-size:10px;}
.btn {width: 6rem;height: 3rem;line-height: 3rem;font-size: 1.2rem;display: inline-block;background: #06c;color: #fff;border-radius: .5rem;text-decoration: none;text-align: center; }

结果：

把html设置成10px是为了方便我们计算，为什么6rem等于60px。如果这个时候我们的.btn的样式不变，我们再改变html的font-size的值，看看按钮发生上面变化:

html{font-size:40px;}

结果：

width，height变成了上面结果的两倍，我们只改变了html的font-size，但.btn样式的width,height的rem设置的属性不变的情况下就改变了按钮在web中的大小。

其实从上面两个案例中我们就可以计算出1px多少rem:

第一个例子：
120px = 6rem * 20px(根元素设置大值)
第二个例子：
240px = 6rem * 40px(根元素设置大值)
推出：
10px = 1rem 在根元素（font-size = 10px的时候）；
20px = 1rem 在根元素（font-size = 20px的时候）；
40px = 1rem 在根元素（font-size = 40px的时候）；

1.实现rem的第一种方式：

通过CSS3 media来实现，根据不同的设备宽度和分辨率来设置不同的font-size,以进行适配，代码如下：

html {
font-size : 20px;
}
@media only screen and (min-width: 401px){
html {
font-size: 25px !important;
}
}
@media only screen and (min-width: 428px){
html {
font-size: 26.75px !important;
}
}
@media only screen and (min-width: 481px){
html {
font-size: 30px !important;
}
}
@media only screen and (min-width: 569px){
html {
font-size: 35px !important;
}
}
@media only screen and (min-width: 641px){
html {
font-size: 40px !important;
}
}

2.实现rem的第二种方式：

通过JS来动态计算，获取设备的宽度，根据当前手机的不同手机屏幕尺寸和dpr（设备像素比）动态改变根节点html的font-size大小（基准值）。这里有一个公式：

rem= document.documentElement.clientWidth*dpr/10

这里的dpr如果你不懂，可以查下是什么意思，另外以后我会陆续写dpr的一些知识，详细讲术这个概念。10指的font-size的基数

我们以iphone5为例，手机屏宽度为320*2=640px。我们将其分成10份，得到font-size基准值rem=640/10=64px

这个是以640为基准备的一种方式，当然可以750为基础。这些东西都取决于设计师给你的设计稿的大小，和你以哪个为基准来计算。

知道了这种原理以后我们就可以动手写一个适配的JS了。不过现在手淘有现成的flexible.js,内容封装的更全面，这个框架的原码分析，我以后会专门写博客进行讲述希望大家关注，今天主要讲怎么使用

第一种方法：将文件下载到你的项目中，然后通过相对路径添加：

第二种方法：直接加载阿里CDN文件

查看代码里设置的font-size大小的基础。这个可以根据自己的项目要求更改。然后进行rem设置。

总结：

上面讲述了现在移动端所有的适配方案，不难看出，rem无疑是最好的选择，对flexible.js内部代码是怎么封装的，以后会详细的解解释，最后大家在开发过程跟据项目的需求选种不同的方式，比如一些简单的应用也是可以用其他方式的。

阅读全文

0 0