前言

　　大家都知道当下，手机屏幕大小多种多样，而且即使同样大小的size，每个手机的设备像素比还不一样。当我们选用html5来开发移动应用的时候，有没有一种合适的方案来完美的适配到所有的屏幕呢？
对移动端接触不多的，可以先了解下移动端的单位、viewport的概念。这里也不再赘述，通过以下连接了解。
1.http://www.cnblogs.com/2050/p/3877280.html　　2.http://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/201509/376281.shtml

经典方式

　　先简要的介绍下现在多数开发者使用的方式，由于这些方式大家或多或少都使用过，而且网上也有非常详细的教程，我就不再重复造轮子，只是简单的列举下。
1.css3 @media

http://www.w3cways.com/1180.html
这种方式适配起来良好，但是还是无法兼容所有的屏幕，而且各个样式都用@media写几套，很麻烦，也不利于后期扩展维护。

2.px+百分百+flex

像目前接触过的一些前端框架ionic、bootstrap、amaze、mui等，对于已经确定无需随屏幕变化的元素，一般用px固定大小，对于宽度的处理用百分比或flex来灵活处理。

这种方式处理起来，大体还好，但是对于小屏iphone5s和大屏iphone6 plus，某些布局只能折中处理。最大的缺陷是，一些布局无法通过百分比或者flex设置的时候，布局的样式和字体的大小都无法随屏幕的变化而响应式变化。

3.对于viewport的处理

固定高度，宽度自适应

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

```
		1
```

固定宽度，动态生成viewport

var fixScreen = function() {
    var metaEl = doc.querySelector('meta[name="viewport"]'),
        metaCtt = metaEl ? metaEl.content : '',
        matchScale = metaCtt.match(/initial\-scale=([\d\.]+)/),
        matchWidth = metaCtt.match(/width=([^,\s]+)/);
    if ( metaEl && !matchScale && ( matchWidth && matchWidth[1] != 'device-width') ) {
        var width = parseInt(matchWidth[1]),
            iw = win.innerWidth || width,
            ow = win.outerWidth || iw,
            sw = win.screen.width || iw,
            saw = win.screen.availWidth || iw,
            ih = win.innerHeight || width,
            oh = win.outerHeight || ih,
            ish = win.screen.height || ih,
            sah = win.screen.availHeight || ih,
            w = Math.min(iw,ow,sw,saw,ih,oh,ish,sah),
            scale = w / width;
        if ( ratio < 1) {
            metaEl.content += ',initial-scale=' + ratio + ',maximum-scale=' + ratio + ', minimum-scale=' + scale;
        }
    }
}

```
		1
```
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

详细处理方式请看以下链接， https://github.com/riskers/blog/issues/18 http://html-js.com/article/MobileWeb

4.根节点固定fontSize,布局单位用rem 动态生成根节点的fontSize：

<script type="text/javascript">
    /*
     * 如果页面的宽度超过了640px，那么页面中 html
     * 的font-size恒为100px，否则，页面中html的
     * font-size的大小为： 100 * (当前页面宽度 / 640)
     *字体大小或者其他div宽高度 * html的font=该元素的实际大小px (htmlFont*(fontRem || divRem)=realPx)
     */
        (function(doc,win){
            var docEle=doc.documentElement;
            var resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize';
            var recalc = function(){
                var clientWidth = docEle.clientWidth;
                if(!clientWidth)
                    return;
                if(clientWidth>=640){
                    docEle.style.fontSize='100px';
                }else{
                    docEle.style.fontSize=100*(clientWidth/640) + 'px';
                }
            };
            if(!doc.addEventListener)
                return;
            win.addEventListener(resizeEvt,recalc,false);
            doc.addEventListener('DOMContentLoaded',recalc,false);
        })(document,window);
    </script>

```
		1
```
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

页面上字体和布局单位都采用rem，该方式基本可以适应大部分的布局，使用过程中发现一个缺陷，由于，fontSize是根据屏幕的宽度自动生成的，那么在横屏的时候，由于设置的元素的高度rem是基于宽度计算的fontSize来的，fontSize会变大，就会造成元素的高度被拉的很高。我们希望是这样的：布局元素的宽度始终基于屏幕宽度百分比变化，布局元素的高度始终基于屏幕高度百分比变化。有没有方法实现呢？答案是有，看下面的一种方式。

5.css3百分比单位vw,vh 1vw等于可视区宽度(屏幕的可视区域即布局区域)的百分之一，1vh等于可视区高度的百分之一

<div style="width:20vw;height:40vh;"></div>

```
		1
```

表示当前元素在任何屏幕下都是div占当前屏幕宽度的20%，当前高度的40%。刚好满足我们的需求，但是你会发现很少有有开发者采用这个单位。很不幸，这个单位有部分浏览器和手机并不支持。我们有没有替代的解决方案呢？就是下面今天打算重点讲的一个方案。

angularjs指令计算百分方式

由于vw，vh不被完全支持的原因，有了这个替代的解决方案，目前项目中正在使用，效果很不错。先上代码：

angular.module('starter.directives', [])
.directive('adaptive',function(){
    function link($scope, element, attrs) { 
        var dom=element[0]; 
        var wPercent = attrs.adaptiveW;
        var hPercent = attrs.adaptiveH;
        var pPercent = attrs.adaptiveP ? attrs.adaptiveP.split(",") : null;
        var mPercent = attrs.adaptiveM ? attrs.adaptiveM.split(",") : null;
        setWAndH();
        function setWAndH(){ 
            var screenW = Math.min(document.documentElement.clientWidth,window.innerWidth);
            var screenH = Math.min(document.documentElement.clientHeight,window.innerHeight);  
            if(wPercent){ //宽度
                dom.style.width=wPercent*screenW+"px";
            }
            if(hPercent){  //高度
                dom.style.height=hPercent*screenH+"px";
            }
            if(pPercent){//padding
                dom.style.paddingTop=pPercent[0]*screenH+"px";
                dom.style.paddingRight=pPercent[1]*screenW+"px";
                dom.style.paddingBottom=pPercent[2]*screenH+"px";
                dom.style.paddingLeft=pPercent[3]*screenW+"px";
            }
            if(mPercent){//margin
                dom.style.marginTop=mPercent[0]*screenH+"px";
                dom.style.marginRight=mPercent[1]*screenW+"px";
                dom.style.marginBottom=mPercent[2]*screenH+"px";
                dom.style.marginLeft=mPercent[3]*screenW+"px";
            }
        } 
        window.onresize=function(){
            setWAndH();
        };
    } 
    return {
        restrict: 'A',
        link: link 
    };
});

```
		1
```
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

使用：

<div adaptive data-adaptive-w='0.1' data-adaptive-h='0.1' style="border:solid 1px red;" data-adaptive-p="0.01,0,0,0" data-adaptive-m="0,0.08,0,0">
    动态计算百分比，div始终占屏幕宽度的百分之10，高度始终占屏幕的百分之10
</div>

```
		1
```
2
3

　　代码很简单，就不做过多解释。用html5的data属性添加我们自己的数据，通过指令封装。在指令里面拿到对应的属性的值，乘屏幕的宽高度，算出实际值，再设置到元素上面。实际上就是一个变相的vw、vh的实现。然后有一个监听屏幕大小变化的函数，比如切屏时候，元素的位置和大小也会随着变化。大家也可以在此基础上进行扩展以满足自己的需要，比如data-adaptive-m=”0,0.1,10px,20px”，然后在指令里面判断下是否包含px，这样扩展就可以用这种方式同时设置px间隔或百分比间隔。这种方式非常灵活，不影响你使用其他的方案，你可以对某一个、某几个有特殊需求的元素进行处理都可以。　　有什么好的建议或其他方案欢迎留言讨论。说一点自己项目中使用的建议：确定要用固定px大小的，尽量用定值px，比如标题栏高度等；宽度布局时候尽量使用百分比或flex或者用指令实现的这种方式；高度需要自适应时候用指令这种方式非常方便；在处理字体大小的时候，如果产品没有特殊要求，可不对字做响应式处理，有特殊要求可以采用上面的rem的方式。

关于：中科研拓
深圳市中科研拓科技有限公司专注提供软件外包、app开发、智能硬件开发、O2O电商平台、手机应用程序、大数据系统、物联网项目等开发外包服务，十年研发经验，上百成功案例，中科院软件外包合作企业。通过IT技术实现创造客户和社会的价值，致力于为用户提供很好的软件解决方案。联系电话400-0316-532，邮箱sales@zhongkerd.com，网址www.zhongkerd.com

上一篇 [返回首页] [打印] [返回上页] 下一篇

HTML5-移动端软件开发响应式布局新方案

前言

经典方式

angularjs指令计算百分方式

最新新闻

友情链接

联系我们