[转]手机触屏版页面开发总结

设置viewpoint和屏幕等宽
Code:

1. <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,让布局更简单
兼容性写法：

1. .flex-box{
2.     overflow: hidden;
3.     display: -webkit-box;
4.     display: -moz-box;
5.     display: -ms-flexbox;
6.     display: flex;
7.     -webkit-box-orient: horizontal;
8.     width: 100%; height: 300px;
9.     margin: 0 auto;
10.     color: #fff;
11.     text-align: center;
12.     font-family: 'Microsoft YaHei';
13. }
14. .flex1{
15.     width: 20%; height: 100%;
16.     background: #ff8989;
17.     display: block;
18. }
19. .flex2{
20.     -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
21.     -moz-box-flex: 1; /* OLD - Firefox 19- */
22.     -webkit-flex: 1; /* Chrome */
23.     -ms-flex: 1; /* IE 10 */
24.     flex: 1;
25.     background: #1bbc9b;
26. }
27. .flex3{
28.     width: auto;
29.     width: 20%; height: 100%;
30.     background: #516d81;
31. }

复制代码

使用box-sizing，可以减少很多不必要的计算

兼容性写法：

1. .sizing{
2.     -moz-box-sizing: border-box;
3.     -o-box-sizing: border-box;
4.     box-sizing: border-box;
5. }

复制代码

使用 CSS 媒体查询

1. @media screen and (min-width: 640px){
2.     样式
3. }

复制代码

其他实用小技巧：
去掉手持设备点击时出现的透明层:

1. a,button,input{ 
2.    -webkit-tap-highlight-color: rgba(0,0,0,0); 
3.    -webkit-tap-highlight-color: transparent; 
4. }

复制代码

去掉input在ios下的默认效果:

1. input{
2.     resize: none;
3.     -webkit-appearance:none;
4. }

复制代码

阻止旋转屏幕时自动调整字体大小

1. html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
2.     -webkit-text-size-adjust:100%;
3. }

复制代码