移动端全局css

[css] view plain copy

1. @charset "utf-8";  
2. body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,select,table,td,textarea,th,ul {margin:0;padding:0;}  
3. body,button,input,select,table,textarea{line-height:1.25em;font-family:'microsoft yahei',Verdana,Arial,Helvetica,sans-serif;}  
4. body {margin:auto;color:#333; font-size:100px; line-height:1.25em; background-color:#f7f7f7;}  
5. fieldset,img {border:0}  
6. ol,ul,li {  list-style:none}  
7. address,em {font-style:normal}  
8. a { color:#333; text-decoration:none; outline:none}  
9. table { border-collapse:collapse}  
10. *{-webkit-tap-highlight-color:rgba(0,0,0,0);}  
11. .clearfix:after {  
12.     visibility: hidden;  
13.     display: block;  
14.     font-size: 0;  
15.     content: " ";  
16.     clear: both;  
17.     height: 0;  
18. }  
19. input[type="button"], input[type="submit"], input[type="reset"] {  
20.     -webkit-appearance: none;  
21. }  
22. @media screen and (max-width:640px){body,button,input,select,table,textarea{font-size:100px}}  
23. @media screen and (max-width:580px){body,button,input,select,table,textarea{font-size:90px;}}  
24. @media screen and (max-width:540px){body,button,input,select,table,textarea{font-size:84px;}}  
25. @media screen and (max-width:480px){body,button,input,select,table,textarea{font-size:75px;}}  
26. @media screen and (max-width:428px){body,button,input,select,table,textarea{font-size:62px;}}  
27. @media screen and (max-width:360px){body,button,input,select,table,textarea{font-size:56px;}}  
28. @media screen and (max-width:320px){body,button,input,select,table,textarea{font-size:50px;}}  
29. /* Hides from IE-mac \*/  
30. * html .clearfix { height: 1%; }  
31. /* End hide from IE-mac */  
32.   
33. .hide{display:none;}  
34.   
35. /*字号*/  
36. .px20{ font-size:0.20em;}  
37. .px22{ font-size:0.22em;}  
38. .px24{ font-size:0.24em;}  
39. .px26{ font-size:0.26em;}  
40. .px28{ font-size:0.28em;}  
41. .px30{ font-size:0.30em;}  
42. .px32{ font-size:0.32em;}  
43. .px34{ font-size:0.34em;}  
44. .px36{ font-size:0.36em;}  
45. /*flexbox*/  
46. .flexbox{display: -webkit-box; display: -moz-box; display: box; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; -webkit-box-pack: end; -moz-box-pack: end; box-pack: end; }  
47. .flexbox-1{ -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1;}  
48.   
49. /*wrap*/  
50. .wrap{ min-width:320px; max-width:640px; margin:0px auto; overflow:hidden}  
51.   
52.   
53.   
54. /*公共头部*/  
55. header.headbar{ height:0.7em; background-color:#2cca77; position:relative; line-height:0.7em; color:#fff;}  
56. header.headbar h1{text-align:center; font-weight:lighter; color:#fff;}  
57. header.headbar a.back{ height:0.23em; width:0.23em; position:absolute; top:50%; margin-top:-0.14em; left:0.3em; border-left:0.05em solid #fff;border-bottom:0.05em solid #fff;  
58.     transform: rotate(45deg);  
59.     -ms-transform: rotate(45deg);  
60.     -webkit-transform: rotate(45deg);  
61.     -o-transform: rotate(45deg);  
62.     -moz-transform: rotate(45deg);  
63. }  
64. header.headbar a{ color:#fff;}  
65. /*公共底部*/  
66. footer{ padding:0.3em 0; background-color:#fff;border-top: solid 1px #e5e5e5;}  
67. footer .flexbox li{-webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; text-align:center; line-height:3em}  
68. footer .flexbox li ,footer .flexbox li a{ color:#626262;}  
69. footer .fontcolor li a{color: #2cca77;}  
70. footer .flexbox:nth-of-type(2) li a{ margin:0 0.4em;}  
71. footer .flexbox li a.curr{ color:#0b7dfb;}