webapp中与css代码部署
1、页面头部标签申明
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml" > 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <!--禁止浏览器缩放--> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 7 <meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type" /> 8 <!--添加 MobileOptimized 标签，告知ios要以320像素的宽度渲染页面，以防在iPhone4s以下发生图片错位的问题--> 9 <meta name="MobileOptimized" content="320"> 10 <!--清除浏览器缓存--> 11 <meta http-equiv="pragma" content="no-cache"> 12 <meta http-equiv="Cache-Control" content="no-cache, must-revalidate"> 13 <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"> 14 <!--iPhone 手机上设置手机号码不被显示为拨号链接）--> 15 <meta content="telephone=no, address=no" name="format-detection" /> 16 <!--IOS私有属性，可以添加到主屏幕--> 17 <meta name="apple-mobile-web-app-capable" content="yes" /> 18 <!--屏幕顶部条的颜色--> 19 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 20 21 <title>手机webApp</title> 22 <!--让IE8，IE9，支持CSS3伪类和属性选择器--> 23 <!--[if lte IE 8]> 24 <script src="scripts/selectivizr.js"></script> 25 <![endif]--> 26 <!--让IE9以下的浏览器支持Html5标签和媒体查询器（主要用于响应式网站开发）--> 27 <!--[if lt IE 9]> 28 <script src="scripts/css3-mediaqueries.js"></script> 29 <script src="scripts/html5shiv.js"></script> 30 <![endif]--> 31 </head>
2、css中解决手机WebApp字体和图片等标签问题
1 /* 禁用iPhone中Safari的字号自动调整 */
2 html { -webkit-text-size-adjust: none; }
3 /* 设置HTML5元素为块 */
4 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
5 /* 设置图片视频等自适应调整 */
6 img { max-width: 100%; height: auto; width: auto9; /* ie8 */ }
7 .video embed, .video object, .video iframe { width: 100%; height: auto; }3、css重置样式
参考：http://www.cnblogs.com/caojiayan/p/6343917.html
1 /* CSS Document */
2 html, body, div, span, object, iframe,h1, h2,
3 h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn,
4 em, img, ins,kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd,
5 ol, ul, li,fieldset, form, label, legend,table, caption, tbody,
6 tfoot,thead,tr, th, td,article, aside, canvas, details, figcaption,
7 figure, footer, header, hgroup, menu, nav, section, summary,time, mark,
8 audio, video {
9 margin:0;
10 padding:0;
11 border:0;
12 outline:0;
13 font-size:100%;
14 vertical-align:baseline;
15 background:transparent;
16 outline-style:none;/*FF*/
17 }
18
19 body {
20 line-height:1;
21 }
22
23 a{
24 margin:0;
25 padding:0;
26 border:0;
27 font-size:100%;
28 vertical-align:baseline;
29 background:transparent;
30
31 }
32 a:hover,a:focus{
33 text-decoration:none;
34 bblr:expression(this.onFocus=this.blur());/*IE*/
35 outline-style:none;/*FF*/
36 }
37 table {
38 border-collapse:collapse;
39 border-spacing:0;
40 }
41
42 input, select {
43 vertical-align:middle;
44 }
45
46 /*css为clearfix，清除浮动*/
47 .clearfix::before,
48 .clearfix::after{
49 content: "";
50 height: 0;
51 line-height: 0;
52 display: block;
53 visibility: hidden;
54 clear: both;
55 }
56 .clearfix:after{clear:both;}
57 .clearfix{
58 *zoom:1;/*IE/7/6*/
59 }4、关于不同设备的媒体查询
1 /*
2 * -----------------------------------------
3 * 320 ~ 480
4 * -----------------------------------------
5 */
6 @media only screen and (min-width: 320px) and (max-width: 480px) {
7
8 }
9
10 /*
11 * -----------------------------------------
12 * 321 ~ 宽大于321的设备
13 * -----------------------------------------
14 */
15 @media only screen and (min-width: 321px) {
16
17 }
18
19 /*
20 * -----------------------------------------
21 * ~ 320 宽小于320的设备
22 * -----------------------------------------
23 */
24 @media only screen and (max-width: 320px) {
25
26 }
27
28 /*
29 * -----------------------------------------
30 * ~ 480 宽小于480的设备
31 * -----------------------------------------
32 */
33 @media only screen and (max-width: 480px) {
34
35 }
36
37 /* medium screens (excludes iPad & iPhone) */
38 /*
39 * -----------------------------------------
40 * 481 ~ 767 宽大于480且小于767的iPad和iPhone
41 * -----------------------------------------
42 */
43 @media only screen and (min-width: 481px) and (max-width: 767px) {
44
45 }
46
47 /* ipads (portrait and landscape) */
48 /*
49 * -----------------------------------------
50 * 768 ~ 1024 宽大于480且小于1024的iPad和iPhone
51 * -----------------------------------------
52 */
53 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
54
55 }
56
57 /* ipads (landscape) */
58 /*
59 * -----------------------------------------
60 * 768 ~ 1024 宽大于480且小于1024的iPad和iPhone
61 * -----------------------------------------
62 */
63 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
64
65 }
66
67 /* ipads (portrait) */
68 /*
69 * -----------------------------------------
70 * 768 ~ 1024 宽大于480且小于1024的iPad和iPhone
71 * -----------------------------------------
72 */
73 @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
74
75 }
76
77 /*
78 * -----------------------------------------
79 * 1444 ~ 1824 宽大于1444且小于1824的设备
80 * -----------------------------------------
81 */
82 @media only screen and (min-width: 1444px) and (max-width: 1824px){
83
84 }
85
86 /*
87 * -----------------------------------------
88 * 1824 ~ 宽大于1824的设备
89 * -----------------------------------------
90 */
91 @media only screen and (min-width: 1824px) {
92
93 }
94
95 /*
96 * -----------------------------------------
97 * 2224 ~ 宽大于2224的设备
98 * -----------------------------------------
99 */
100 @media only screen and (min-width: 2224px) {
101
102 }
103
104 /* iphone 4 and high pixel ratio (1.5+) devices */
105 /*
106 * -----------------------------------------
107 * iphone4 ~
108 * -----------------------------------------
109 */
110 @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
111
112 }
113
114 /* iphone 4 and higher pixel ratio (2+) devices (retina) */
115 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
116
117 }