手机触屏版页面开发总结
设置viewpoint和屏幕等宽
<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; }
demo:
<!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>
使用box-sizing，可以减少很多不必要的计算
兼容性写法：
.sizing{ -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }
使用 CSS 媒体查询
@media screen and (min-width: 640px){ 样式 }
其他实用小技巧：
去掉手持设备点击时出现的透明层:
a,button,input{ -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; }
去掉input在ios下的默认效果:
input{ resize: none; -webkit-appearance:none; }
阻止旋转屏幕时自动调整字体大小
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 { -webkit-text-size-adjust:100%; }
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
