欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > 分享 >

手机触屏版页面开发总结

发布时间:2014-11-07  编辑:杨雨个人博客网站   点击:   

经过一年的触屏版开发,每一个项目开始前总要做大量的准备,力求做到完美,但做下一个项目的时候总会发现上一个项目有着太多的不足。这应该就是成长吧!虽然不是什么大牛但也觉得有必要把一些技巧和经验记录下来,以便同行们参考和补充.
设置viewpoint和屏幕等宽

Code:

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

主流分辨率

Android:主流机型主要为 480x800, 480x854, 540x960, 720x1280, 800x1280 这五种。
(非主流机型还包括:240x320, 320x480, 640x960 这三种,其中两种都与 iPhone 一致。)
iOS: 主流机型主要为 320x480, 640x960, 640x1136, 1024x768, 2048x1536, 这五种。
WP:主流机型主要为 480x800,720x1280, 768x1280 这三种
新增:iPhone6:750*1334 iPHone6s 1242*2208

使用相对单位

1、宽、高、填充、边界均使用百分比
2、字体em/rem
em:相对父级
rem(root element):相对根父级
ps:字体单位一览表(各大浏览器默认字体16px)
 
Pixels
EMs
Percent
Points
6px
0.375em
37.5%
5pt
7px
0.438em
43.8%
5pt
8px
0.5em
50%
6pt
9px
0.563em
56.3%
7pt
10px
0.625em
62.5%
8pt
11px
0.688em
68.8%
8pt
12px
0.75
75%
9pt
13px
0.813
81.3%
10pt
14px
0.875
87.5%
11pt
15px
0.938
93.8%
11pt
16px
1em
100%
12pt
17px
1.063em
106.3%
13pt
18px
1.125em
112.5%
14pt
19px
1.188em
118.8%
14pt
20px
1.25em
125%
15pt
21px
1.313em
131.3%
16pt
22px
1.375em
137.5%
17pt
23px
1.438em
143.8%
17pt
24px
1.5em
150%
18pt
 

合理使用box-flex,让布局更简单

兼容性写法:
.flex-box{
    overflow: hidden;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    width: 100%; height: 300px;
    margin: 0 auto;
    color: #fff;
    text-align: center;
    font-family: 'Microsoft YaHei';
}
.flex1{
    width: 20%; height: 100%;
    background: #ff8989;
    display: block;
}
.flex2{
    -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1; /* OLD - Firefox 19- */
    -webkit-flex: 1; /* Chrome */
    -ms-flex: 1; /* IE 10 */
    flex: 1;
    background: #1bbc9b;
}
.flex3{
    width: auto;
    width: 20%; height: 100%;
    background: #516d81;
}

本文地址:http://itbyc.com/share/2456.html
转载请注明出处。
分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1