app屏幕的适配方案

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

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<meta content="telephone=no" name="format-detection">

2、实现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,内容封装的更全面，这个框架的原码分析，我以后会专门写博客进行讲述希望大家关注，今天主要讲怎么使用

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

<script src="build/flexible.js"></script>

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

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js">

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

总结：

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