文章目录

在使用HTML5开发移动APP/页面的时候,屏幕适配是个很重要也是很繁琐的事情,需要有丰富CSS经验和layout的概念。
网上大部分文章肯定都讲到了使用Media Query来实现,这种方式是最好的实现方式,不仅能实现自适应还能根据不同的屏幕将布局和资源的效果调整到最佳状态。但是有时候我们的应用要求不是那么高,而且时间要求紧迫,这种方式相对就有点累了,所以我们可以使用弹性模型来快速实现。

  • 首先第一步使用viewoport代码。
    1
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

这个就不详细说明了,一定设备屏幕适配最基本的东西,可以在网上查阅资料

然后就是项目中layout使用弹性盒子模型布局,首先我们定义一套通用的CSS样式。

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
[data-box]{
display: box;
display: -moz-box;
display: -webkit-box;
>[data-flex='1']{
.boxFlex(1);
}
>[data-flex='2']{
.boxFlex(2);
}
>[data-flex='3']{
.boxFlex(3);
}
>[data-flex='4']{
.boxFlex(4);
}
>[data-flex='5']{
.boxFlex(5);
}
>[data-flex='6']{
.boxFlex(6);
}
}
[data-box='v']{
box-orient:vertical;
-moz-box-orient:horizontal;
-webkit-box-orient:vertical;
}
[data-box='h']{
box-orient:horizontal;
-moz-box-orient:horizontal;
-webkit-box-orient:horizontal;
}

data-box=’h’ 即 水平排列,data-box=’v’ 即垂直排列
然后在我们的layout的界面中直接使用属性即可
比如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="category" class="container" data-box="v">
<header data-box="h">
<div data-flex="1" id="title"></div>
<button id="search"></button>
<button id="record"></button>
<button id="listMode" onclick="changeListStyle()"></button>
</header>
<div class="content" data-flex="1" data-box="v">
<ul class="category" id="categoryContent" data-box="h"></ul>
<div data-flex="1" class="videoList"></div>
<img src="" id="preview" class="preview"/>
<button class="prev" name="turning"></button>
<button class="next" name="turning"></button>
<div class="pages" data-box="h">
<div><span data-property="PageIndex"></span>/<span class="total" data-property="TotalPage"></span>按遥控器+-键翻页</div>
</div>
</div>
</div>

上列是个比较复杂,嵌套类的例子,盒子里面可以嵌套盒子。但是我们把它简单的从CSS里面抽象一下,代码层次感也会好很多,后期维护也简单多了。

弹性盒子模型的使用如果不会的,可去相关网站查阅下相关属性和描述。

此文是本站原创,转载请标注作者和链接出处!