responsive.css 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. -webkit-appearance: none; /*去掉浏览器默认样式*/
  5. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  6. -webkit-touch-callout: none;
  7. box-sizing: border-box;
  8. }
  9. body,.body {
  10. -webkit-text-size-adjust: 100%; /*关闭自动调整字体*/
  11. -webkit-overflow-scrolling: touch;
  12. overflow-scrolling: touch;
  13. }
  14. /*pad*/
  15. img{
  16. max-width:90%;
  17. }
  18. input[type="submit"], input[type="reset"], input[type="button"], button { -webkit-appearance: none; /*去掉苹果的默认UI来渲染按钮*/}
  19. @media only screen and (max-width:1480px) {
  20. .wrapper{
  21. width: 1240px;
  22. }
  23. .hbanner .wrapper{
  24. background-size: 550px auto;
  25. }
  26. .hrow .txt h2{
  27. font-size: 36px;
  28. }
  29. .hrow .txt p{
  30. font-size: 18px;
  31. }
  32. }
  33. /* 电脑小屏--md */
  34. @media screen and (max-width:1200px){
  35. .wrapper{
  36. width: 1170px;
  37. }
  38. /*价格*/
  39. .mprice-main .wrapper{
  40. padding-left: 150px;
  41. position: relative;
  42. margin-right: 20px;
  43. }
  44. .mprice-main{
  45. background-size: cover;
  46. padding-bottom: 40px;
  47. padding-top: 100px;
  48. }
  49. .mprice-main .itemwrap{
  50. white-space: nowrap;
  51. overflow-x: scroll;
  52. padding-top: 80px;
  53. }
  54. .mprice-main .item{
  55. float: none; display: inline-block;
  56. vertical-align: top;
  57. width: 200px;
  58. }
  59. .mprice-main .item ul.tit{
  60. padding-left: 20px;
  61. }
  62. .mprice-main .itemtit{
  63. position: absolute; left: 0; top: 0;
  64. }
  65. .mprice-main .item .btn a{
  66. width: 120px; height: 45px; line-height: 45px; font-size: 14px;
  67. }
  68. .mprice-explain{
  69. padding: 60px 0;
  70. }
  71. .mprice-explain .wrapper{
  72. padding: 0 20px;
  73. }
  74. }
  75. /* 平板--sm */
  76. @media screen and (max-width:992px) {
  77. .gh{
  78. display: block;
  79. }
  80. .gh+ .nav{
  81. height: auto;
  82. background: #fff;
  83. overflow: hidden;
  84. transition: 0.4s;
  85. padding: 0; max-height: 0;
  86. margin-right: 0;
  87. float: none;
  88. width: 100%;
  89. text-align: center;
  90. }
  91. .header .nav ul{
  92. padding: 20px 0;
  93. }
  94. .header .nav li{
  95. display: block;
  96. margin-left: 0;
  97. }
  98. .nav a{
  99. color: #000; display: block; padding: 10px 0;
  100. }
  101. .header{
  102. /*margin-top: 20px;*/
  103. padding-top: 20px;
  104. }
  105. .header .logo{
  106. margin-left: 20px;
  107. }
  108. .wrapper{
  109. width: auto;
  110. }
  111. .hbanner .wrapper{
  112. background-size: 300px auto;
  113. background-position: center 100px;
  114. background-position-y:24%;
  115. padding-top: 400px;
  116. height: auto;
  117. padding-bottom: 100px;
  118. }
  119. .hbanner-txt .btns a{
  120. width:auto; min-width: 120px; height: 45px; line-height: 45px;
  121. }
  122. .hbanner-txt{
  123. padding-left: 40px;
  124. /*text-align: center;*/
  125. }
  126. .hbanner-txt h2{
  127. font-size: 24px;
  128. }
  129. .hbanner-txt .list li{
  130. margin-bottom: 15px;
  131. }
  132. .hrow .img{
  133. width: auto; float: none; text-align: center;
  134. padding-top: 0;
  135. }
  136. .hrow{
  137. height: auto !important;
  138. padding-bottom: 100px;
  139. padding-top: 100px;
  140. }
  141. .hrow .txt{
  142. width: auto; float: none; padding-top: 40px;
  143. }
  144. .hrow .img>img{
  145. max-width: 220px;
  146. }
  147. .hrow .txt h2{
  148. font-size: 24px; margin-bottom: 20px;
  149. }
  150. .hrow .txt p{
  151. font-size: 14px; padding-bottom: 10px;
  152. }
  153. .hfoot{
  154. padding-top: 100px;
  155. height: auto;
  156. padding-bottom: 120px;
  157. background-size: cover;
  158. }
  159. .hfoot h2{
  160. font-size: 24px;
  161. }
  162. .hfoot h2 br{
  163. display: block;
  164. }
  165. .hfoot .btn{
  166. width:auto; min-width: 120px; height: 45px; line-height: 45px;
  167. }
  168. /*下载*/
  169. .downpage{
  170. width: auto; margin-left: 20px; margin-right: 20px;
  171. margin-top: 100px;
  172. margin-bottom: 100px;
  173. }
  174. .downlist{
  175. padding: 40px 0;
  176. }
  177. .downlist .body{
  178. margin-top: 40px;
  179. }
  180. .downlist .body li{
  181. display: block; margin-bottom: 40px;
  182. }
  183. .downlist .body .btn a{
  184. width: auto; min-width: 120px; height: 45px; line-height: 45px; font-size: 14px;
  185. }
  186. /*注册*/
  187. .form-box{
  188. width: auto; margin-left: 20px; margin-right: 20px;
  189. margin-top: 150px;
  190. margin-bottom: 100px;
  191. }
  192. .form{
  193. padding: 20px;
  194. padding-top: 70px;
  195. }
  196. .form-btns button{
  197. height: 45px; line-height: 45px; font-size: 14px;
  198. }
  199. .form-list .text{
  200. height: 45px;
  201. }
  202. .form-list .textcode + img{
  203. height: 45px; width: 100px;
  204. }
  205. /*价格*/
  206. }
  207. @media screen and (max-width:768px){
  208. /*.wrapper{
  209. width: 750px;
  210. }*/
  211. }