webapp中与css代码部署

时间:2022-12-30 13:41:43

 1、页面头部标签申明

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml" id="test">
 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 }