手机触屏版页面开发总结

http://blog.csdn.net/laijieyao/article/details/43054643

经过一年的触屏版开发，每一个项目开始前总要做大量的准备，力求做到完美，但做下一个项目的时候总会发现上一个项目有着太多的不足。这应该就是成长吧！虽然不是什么大牛但也觉得有必要把一些技巧和经验记录下来，以便同行们参考和补充（或者到手机触屏版页面开发总结留言补充哦）。

设置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,让布局更简单

兼容性写法：

[javascript]view plain copy 
    
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
     <meta charset="UTF-8">  
     <title>Document</title>  
 </head>  
 <style>  
     .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;  
     }  
 </style>  
 <body>  
     <p>你可以改变屏幕宽度查看效果</p>  
     <div class="flex-box">  
         <div class="flex1">flex1 <br> 我的宽度为父级的20%；</div>  
         <div class="flex2">flex2 <br> 我的宽度为父级宽-(flex1+flex3)；</div>  
         <div class="flex3">flex3 <br> 我的宽度为父级的20%；</div>  
     </div>  
 </body>  
 </html>  

手机触屏版页面开发总结

猜你喜欢