├── .gitignore ├── .idea └── workspace.xml ├── README.md ├── adaptive.js ├── adaptive.min.js ├── index.html └── temp ├── demo.css ├── nn.jpg └── vv.jpg /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | -------------------------------------------------------------------------------- /.idea/workspace.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | 16 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 85 | 86 | 87 | 89 | 90 | 97 | 98 | 99 | 100 | 101 | true 102 | DEFINITION_ORDER 103 | 104 | 105 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 143 | 144 | 145 | 146 | 149 | 150 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 197 | 198 | project 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | project 215 | 216 | 217 | true 218 | 219 | bdd 220 | 221 | DIRECTORY 222 | 223 | false 224 | 225 | 226 | 227 | 228 | 230 | 231 | 232 | 233 | 1481251134413 234 | 242 | 243 | 1481252264652 244 | 249 | 250 | 1481252365599 251 | 256 | 257 | 1481252723730 258 | 263 | 264 | 1481252857421 265 | 270 | 271 | 1481260065566 272 | 277 | 278 | 1481273580333 279 | 284 | 287 | 288 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 316 | 317 | 318 | 319 | 320 | 321 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 | 443 | 444 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 | 456 | 457 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 | 466 | 467 | 468 | 469 | 470 | 471 | 472 | 473 | 474 | 475 | 476 | 477 | 478 | 479 | 480 | 481 | 482 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # adaptive.js 2 | - 借鉴手淘方案，使移动端自适应开发更方便。 3 | - 抛弃`[data-dpr="2"] span{font-size: 32px;}`的兼容写法 4 | # 5 | 6 | # theory 7 | 借鉴手淘方案，`adaptive.js`将整个页面宽度平均分成10份，以`clineWidth / 10`的结果作为`html`标签的`font-size`值。 8 | 布局中使用`rem`作为单位。举例：某UI设计出来的手机页面宽为`750px`，那么分成十份后为`75px`，此时`html`标签的`font-size: 75px`, 9 | 布局时某一模块在设计稿上宽为`100px`，转成`rem`则为：`100 / 75 = 1.3333rem`;在css中则为：`width: 1.3333rem`。 10 | 11 | # usage 12 | `adaptive.js`非常小巧,压缩后的`adaptive.min.js`大小只有1KB。 13 | `adaptive.js`不依赖任何js库，你可以在head标签内引用`adaptive.min.js`后即可直接使用 14 | 15 | # template 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | template 24 | 25 | 32 | 33 | 34 |
35 | 36 |
37 | 38 | 39 | 40 | # demo 41 | [点我查看小demo](https://vibing.github.io/adaptive) 42 | 你可以在任何安卓机或iphone上进行测试，如果有问题请到我的[segmentfault](https://segmentfault.com/u/ve)联系我 43 | -------------------------------------------------------------------------------- /adaptive.js: -------------------------------------------------------------------------------- 1 | /** 2 | * create by iLong 3 | */ 4 | ;(function () { 5 | var doc = window.document, 6 | docEl = doc.documentElement, 7 | tid; 8 | 9 | function refreshRem() { 10 | var width = docEl.getBoundingClientRect().width; 11 | if(width > 540){ 12 | width = 540; 13 | } 14 | var rem = width / 10; 15 | docEl.style.fontSize = rem+'px'; 16 | } 17 | 18 | window.addEventListener('resize',function () { 19 | clearTimeout(tid); 20 | tid = setTimeout(refreshRem,100); 21 | },false); 22 | 23 | window.addEventListener('pageshow',function (e) { 24 | if(e.persisted){ 25 | clearTimeout(tid); 26 | tid = setTimeout(refreshRem,100); 27 | } 28 | },false); 29 | 30 | if (doc.readyState === 'complete') { 31 | doc.body.style.fontSize = 12 + 'px'; 32 | } else { 33 | doc.addEventListener('DOMContentLoaded', function() { 34 | doc.body.style.fontSize = 12 + 'px'; 35 | }, false); 36 | } 37 | 38 | refreshRem(); 39 | })(); -------------------------------------------------------------------------------- /adaptive.min.js: -------------------------------------------------------------------------------- 1 | ;(function(){var doc=window.document,docEl=doc.documentElement,tid;function refreshRem(){var width=docEl.getBoundingClientRect().width;if(width>540){width=540}var rem=width/10;docEl.style.fontSize=rem+'px'}window.addEventListener('resize',function(){clearTimeout(tid);tid=setTimeout(refreshRem,100)},false);window.addEventListener('pageshow',function(e){if(e.persisted){clearTimeout(tid);tid=setTimeout(refreshRem,100)}},false);if(doc.readyState==='complete'){doc.body.style.fontSize=12+'px'}else{doc.addEventListener('DOMContentLoaded',function(){doc.body.style.fontSize=12+'px'},false)}refreshRem()})(); 2 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | template 9 | 10 | 11 | 18 | 19 | 20 | 21 |
22 |
23 | 26 |

xxx有限公司

27 |

江苏 南京

28 |
29 | 30 |
31 |
32 |
33 |
34 | 35 |

精选商品

36 |
37 |
38 | 39 |

搭配方案

40 |
41 |
42 | 43 |

全景样板间

44 |
45 |
46 |
47 |
48 | 49 |
50 |

推荐商品

51 |
RECOMMENDED ITEMS
52 |
53 | 54 |
55 |
56 |
57 | 58 | 59 | 60 | 61 |

商品名称

62 |
63 |
64 | 65 | 66 | 67 | 68 |

商品名称

69 |
70 |
71 | 72 |

商品名称

73 |
74 |
75 | 76 |

商品名称

77 |
78 |
79 | 80 |

商品名称

81 |
82 |
83 | 84 |

商品名称

85 |
86 |
87 | 88 |
89 | 查看更多 90 |
91 |
92 | 93 | 94 |
95 | 96 | -------------------------------------------------------------------------------- /temp/demo.css: -------------------------------------------------------------------------------- 1 | img,legend{border:0}legend,td,th{padding:0}.relative,sub,sup{position:relative}.clearfix:after,.container-fluid:after,.container:after,.row:after{clear:both}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;height:100%;overflow-y:auto}body{margin:0;min-height:100%}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0;color:#4183C4;text-decoration:none}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{margin:.67em 0;font-size:2em}mark{color:#000;background:#ff0}small{font-size:80%}sub,sup{font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{height:0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}pre,textarea{overflow:auto}button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{padding:.35em .625em .75em;margin:0 2px;border:1px solid silver}.container,.container-fluid{margin-right:auto;margin-left:auto}table{border-spacing:0;border-collapse:collapse}.container,.container-fluid{padding-right:15px;padding-left:15px}a:active,a:hover{outline:0}.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.row:after,.row:before{display:table;content:" "}@media (min-width:768px){.container{width:750px}}@media (min-width:992px){.container{width:970px}}@media (min-width:1200px){.container{width:1170px}}.row{margin-right:-15px;margin-left:-15px}.col-l-1,.col-l-10,.col-l-11,.col-l-12,.col-l-2,.col-l-3,.col-l-4,.col-l-5,.col-l-6,.col-l-7,.col-l-8,.col-l-9,.col-m-1,.col-m-10,.col-m-11,.col-m-12,.col-m-2,.col-m-3,.col-m-4,.col-m-5,.col-m-6,.col-m-7,.col-m-8,.col-m-9,.col-s-1,.col-s-10,.col-s-11,.col-s-12,.col-s-2,.col-s-3,.col-s-4,.col-s-5,.col-s-6,.col-s-7,.col-s-8,.col-s-9,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9{position:relative;min-height:1px;padding-right:15px;padding-left:15px}.col-s-1,.col-s-10,.col-s-11,.col-s-12,.col-s-2,.col-s-3,.col-s-4,.col-s-5,.col-s-6,.col-s-7,.col-s-8,.col-s-9{float:left}.col-s-12{width:100%}.col-s-11{width:91.66666667%}.col-s-10{width:83.33333333%}.col-s-9{width:75%}.col-s-8{width:66.66666667%}.col-s-7{width:58.33333333%}.col-s-6{width:50%}.col-s-5{width:41.66666667%}.col-s-4{width:33.33333333%}.col-s-3{width:25%}.col-s-2{width:16.66666667%}.col-s-1{width:8.33333333%}.col-s-pull-12{right:100%}.col-s-pull-11{right:91.66666667%}.col-s-pull-10{right:83.33333333%}.col-s-pull-9{right:75%}.col-s-pull-8{right:66.66666667%}.col-s-pull-7{right:58.33333333%}.col-s-pull-6{right:50%}.col-s-pull-5{right:41.66666667%}.col-s-pull-4{right:33.33333333%}.col-s-pull-3{right:25%}.col-s-pull-2{right:16.66666667%}.col-s-pull-1{right:8.33333333%}.col-s-pull-0{right:auto}.col-s-push-12{left:100%}.col-s-push-11{left:91.66666667%}.col-s-push-10{left:83.33333333%}.col-s-push-9{left:75%}.col-s-push-8{left:66.66666667%}.col-s-push-7{left:58.33333333%}.col-s-push-6{left:50%}.col-s-push-5{left:41.66666667%}.col-s-push-4{left:33.33333333%}.col-s-push-3{left:25%}.col-s-push-2{left:16.66666667%}.col-s-push-1{left:8.33333333%}.col-s-push-0{left:auto}.col-s-offset-12{margin-left:100%}.col-s-offset-11{margin-left:91.66666667%}.col-s-offset-10{margin-left:83.33333333%}.col-s-offset-9{margin-left:75%}.col-s-offset-8{margin-left:66.66666667%}.col-s-offset-7{margin-left:58.33333333%}.col-s-offset-6{margin-left:50%}.col-s-offset-5{margin-left:41.66666667%}.col-s-offset-4{margin-left:33.33333333%}.col-s-offset-3{margin-left:25%}.col-s-offset-2{margin-left:16.66666667%}.col-s-offset-1{margin-left:8.33333333%}.col-s-offset-0{margin-left:0}@media (min-width:768px){.col-m-1,.col-m-10,.col-m-11,.col-m-12,.col-m-2,.col-m-3,.col-m-4,.col-m-5,.col-m-6,.col-m-7,.col-m-8,.col-m-9{float:left}.col-m-12{width:100%}.col-m-11{width:91.66666667%}.col-m-10{width:83.33333333%}.col-m-9{width:75%}.col-m-8{width:66.66666667%}.col-m-7{width:58.33333333%}.col-m-6{width:50%}.col-m-5{width:41.66666667%}.col-m-4{width:33.33333333%}.col-m-3{width:25%}.col-m-2{width:16.66666667%}.col-m-1{width:8.33333333%}.col-m-pull-12{right:100%}.col-m-pull-11{right:91.66666667%}.col-m-pull-10{right:83.33333333%}.col-m-pull-9{right:75%}.col-m-pull-8{right:66.66666667%}.col-m-pull-7{right:58.33333333%}.col-m-pull-6{right:50%}.col-m-pull-5{right:41.66666667%}.col-m-pull-4{right:33.33333333%}.col-m-pull-3{right:25%}.col-m-pull-2{right:16.66666667%}.col-m-pull-1{right:8.33333333%}.col-m-pull-0{right:auto}.col-m-push-12{left:100%}.col-m-push-11{left:91.66666667%}.col-m-push-10{left:83.33333333%}.col-m-push-9{left:75%}.col-m-push-8{left:66.66666667%}.col-m-push-7{left:58.33333333%}.col-m-push-6{left:50%}.col-m-push-5{left:41.66666667%}.col-m-push-4{left:33.33333333%}.col-m-push-3{left:25%}.col-m-push-2{left:16.66666667%}.col-m-push-1{left:8.33333333%}.col-m-push-0{left:auto}.col-m-offset-12{margin-left:100%}.col-m-offset-11{margin-left:91.66666667%}.col-m-offset-10{margin-left:83.33333333%}.col-m-offset-9{margin-left:75%}.col-m-offset-8{margin-left:66.66666667%}.col-m-offset-7{margin-left:58.33333333%}.col-m-offset-6{margin-left:50%}.col-m-offset-5{margin-left:41.66666667%}.col-m-offset-4{margin-left:33.33333333%}.col-m-offset-3{margin-left:25%}.col-m-offset-2{margin-left:16.66666667%}.col-m-offset-1{margin-left:8.33333333%}.col-m-offset-0{margin-left:0}}@media (min-width:992px){.col-l-1,.col-l-10,.col-l-11,.col-l-12,.col-l-2,.col-l-3,.col-l-4,.col-l-5,.col-l-6,.col-l-7,.col-l-8,.col-l-9{float:left}.col-l-12{width:100%}.col-l-11{width:91.66666667%}.col-l-10{width:83.33333333%}.col-l-9{width:75%}.col-l-8{width:66.66666667%}.col-l-7{width:58.33333333%}.col-l-6{width:50%}.col-l-5{width:41.66666667%}.col-l-4{width:33.33333333%}.col-l-3{width:25%}.col-l-2{width:16.66666667%}.col-l-1{width:8.33333333%}.col-l-pull-12{right:100%}.col-l-pull-11{right:91.66666667%}.col-l-pull-10{right:83.33333333%}.col-l-pull-9{right:75%}.col-l-pull-8{right:66.66666667%}.col-l-pull-7{right:58.33333333%}.col-l-pull-6{right:50%}.col-l-pull-5{right:41.66666667%}.col-l-pull-4{right:33.33333333%}.col-l-pull-3{right:25%}.col-l-pull-2{right:16.66666667%}.col-l-pull-1{right:8.33333333%}.col-l-pull-0{right:auto}.col-l-push-12{left:100%}.col-l-push-11{left:91.66666667%}.col-l-push-10{left:83.33333333%}.col-l-push-9{left:75%}.col-l-push-8{left:66.66666667%}.col-l-push-7{left:58.33333333%}.col-l-push-6{left:50%}.col-l-push-5{left:41.66666667%}.col-l-push-4{left:33.33333333%}.col-l-push-3{left:25%}.col-l-push-2{left:16.66666667%}.col-l-push-1{left:8.33333333%}.col-l-push-0{left:auto}.col-l-offset-12{margin-left:100%}.col-l-offset-11{margin-left:91.66666667%}.col-l-offset-10{margin-left:83.33333333%}.col-l-offset-9{margin-left:75%}.col-l-offset-8{margin-left:66.66666667%}.col-l-offset-7{margin-left:58.33333333%}.col-l-offset-6{margin-left:50%}.col-l-offset-5{margin-left:41.66666667%}.col-l-offset-4{margin-left:33.33333333%}.col-l-offset-3{margin-left:25%}.col-l-offset-2{margin-left:16.66666667%}.col-l-offset-1{margin-left:8.33333333%}.col-l-offset-0{margin-left:0}}.show{display:block!important}.hidden,.visible-l,.visible-l-block,.visible-l-inline,.visible-l-inline-block,.visible-m,.visible-m-block,.visible-m-inline,.visible-m-inline-block,.visible-s,.visible-s-block,.visible-s-inline,.visible-s-inline-block,.visible-xl,.visible-xl-block,.visible-xl-inline,.visible-xl-inline-block{display:none!important}.invisible{visibility:hidden}@media (max-width:767px){.visible-s,.visible-s-block{display:block!important}.visible-s-inline{display:inline!important}.visible-s-inline-block{display:inline-block!important}}@media (min-width:768px) and (max-width:991px){.visible-m,.visible-m-block{display:block!important}.visible-m-inline{display:inline!important}.visible-m-inline-block{display:inline-block!important}}@media (min-width:992px) and (max-width:1199px){.visible-l,.visible-l-block{display:block!important}.visible-l-inline{display:inline!important}.visible-l-inline-block{display:inline-block!important}}@media (min-width:1200px){.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9{float:left}.col-xl-12{width:100%}.col-xl-11{width:91.66666667%}.col-xl-10{width:83.33333333%}.col-xl-9{width:75%}.col-xl-8{width:66.66666667%}.col-xl-7{width:58.33333333%}.col-xl-6{width:50%}.col-xl-5{width:41.66666667%}.col-xl-4{width:33.33333333%}.col-xl-3{width:25%}.col-xl-2{width:16.66666667%}.col-xl-1{width:8.33333333%}.col-xl-pull-12{right:100%}.col-xl-pull-11{right:91.66666667%}.col-xl-pull-10{right:83.33333333%}.col-xl-pull-9{right:75%}.col-xl-pull-8{right:66.66666667%}.col-xl-pull-7{right:58.33333333%}.col-xl-pull-6{right:50%}.col-xl-pull-5{right:41.66666667%}.col-xl-pull-4{right:33.33333333%}.col-xl-pull-3{right:25%}.col-xl-pull-2{right:16.66666667%}.col-xl-pull-1{right:8.33333333%}.col-xl-pull-0{right:auto}.col-xl-push-12{left:100%}.col-xl-push-11{left:91.66666667%}.col-xl-push-10{left:83.33333333%}.col-xl-push-9{left:75%}.col-xl-push-8{left:66.66666667%}.col-xl-push-7{left:58.33333333%}.col-xl-push-6{left:50%}.col-xl-push-5{left:41.66666667%}.col-xl-push-4{left:33.33333333%}.col-xl-push-3{left:25%}.col-xl-push-2{left:16.66666667%}.col-xl-push-1{left:8.33333333%}.col-xl-push-0{left:auto}.col-xl-offset-12{margin-left:100%}.col-xl-offset-11{margin-left:91.66666667%}.col-xl-offset-10{margin-left:83.33333333%}.col-xl-offset-9{margin-left:75%}.col-xl-offset-8{margin-left:66.66666667%}.col-xl-offset-7{margin-left:58.33333333%}.col-xl-offset-6{margin-left:50%}.col-xl-offset-5{margin-left:41.66666667%}.col-xl-offset-4{margin-left:33.33333333%}.col-xl-offset-3{margin-left:25%}.col-xl-offset-2{margin-left:16.66666667%}.col-xl-offset-1{margin-left:8.33333333%}.col-xl-offset-0{margin-left:0}.visible-xl,.visible-xl-block{display:block!important}.visible-xl-inline{display:inline!important}.visible-xl-inline-block{display:inline-block!important}.hidden-xl{display:none!important}}@media (max-width:767px){.hidden-s{display:none!important}}@media (min-width:768px) and (max-width:991px){.hidden-m{display:none!important}}@media (min-width:992px) and (max-width:1199px){.hidden-l{display:none!important}}.ff-simsun{font-family:Simsun}.ff-yahei{font-family:"Microsoft YaHei"}.ff-georgia{font-family:georgia}.fs-12{font-size:12px}.fs-14{font-size:14px}.fs-16{font-size:16px}.fs-18{font-size:18px}.fs-20{font-size:20px}.fs-22{font-size:22px}.fs-24{font-size:24px}.fs-26{font-size:26px}.fs-28{font-size:28px}.fs-30{font-size:30px}.c-000{color:#000}.c-111{color:#111}.c-222{color:#222}.c-333{color:#333}.c-444{color:#444}.c-555{color:#555}.c-666{color:#666}.c-777{color:#777}.c-888{color:#888}.c-999{color:#999}.c-aaa{color:#aaa}.c-bbb{color:#bbb}.c-ccc{color:#ccc}.c-ddd{color:#ddd}.c-eee{color:#eee}.c-fff{color:#fff}.c-red{color:#E74C3C}.c-blue{color:#3498DB}.c-green{color:green}.bc-000{background-color:#000}.bc-111{background-color:#111}.bc-222{background-color:#222}.bc-333{background-color:#333}.bc-444{background-color:#444}.bc-555{background-color:#555}.bc-666{background-color:#666}.bc-777{background-color:#777}.bc-888{background-color:#888}.bc-999{background-color:#999}.bc-aaa{background-color:#aaa}.bc-bbb{background-color:#bbb}.bc-ccc{background-color:#ccc}.bc-ddd{background-color:#ddd}.bc-eee{background-color:#eee}.bc-fff{background-color:#fff}.bc-red{background-color:#E74C3C}.bc-blue{background-color:#3498DB}.bc-green{background-color:#0D950D}.fw-normal{font-weight:400!important}.fw-bold{font-weight:700!important}.m-0{margin:0!important}.m-1{margin:1px!important}.m-2{margin:2px!important}.m-3{margin:3px!important}.m-4{margin:4px!important}.m-5{margin:5px!important}.m-6{margin:6px!important}.m-7{margin:7px!important}.m-8{margin:8px!important}.m-9{margin:9px!important}.m-10{margin:10px!important}.m-15{margin:15px!important}.m-20{margin:20px!important}.m-25{margin:25px!important}.m-30{margin:30px!important}.m-35{margin:35px!important}.m-40{margin:40px!important}.m-45{margin:45px!important}.m-50{margin:50px!important}.mt-0{margin-top:0!important}.mt-1{margin-top:1px!important}.mt-2{margin-top:2px!important}.mt-3{margin-top:3px!important}.mt-4{margin-top:4px!important}.mt-5{margin-top:5px!important}.mt-6{margin-top:6px!important}.mt-7{margin-top:7px!important}.mt-8{margin-top:8px!important}.mt-9{margin-top:9px!important}.mt-10{margin-top:10px!important}.mt-15{margin-top:15px!important}.mt-20{margin-top:20px!important}.mt-25{margin-top:25px!important}.mt-30{margin-top:30px!important}.mt-35{margin-top:35px!important}.mt-40{margin-top:40px!important}.mt-45{margin-top:45px!important}.mt-50{margin-top:50px!important}.mr-0{margin-right:0!important}.mr-1{margin-right:1px!important}.mr-2{margin-right:2px!important}.mr-3{margin-right:3px!important}.mr-4{margin-right:4px!important}.mr-5{margin-right:5px!important}.mr-6{margin-right:6px!important}.mr-7{margin-right:7px!important}.mr-8{margin-right:8px!important}.mr-9{margin-right:9px!important}.mr-10{margin-right:10px!important}.mr-15{margin-right:15px!important}.mr-20{margin-right:20px!important}.mr-25{margin-right:25px!important}.mr-30{margin-right:30px!important}.mr-35{margin-right:35px!important}.mr-40{margin-right:40px!important}.mr-45{margin-right:45px!important}.mr-50{margin-right:50px!important}.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:1px!important}.mb-2{margin-bottom:2px!important}.mb-3{margin-bottom:3px!important}.mb-4{margin-bottom:4px!important}.mb-5{margin-bottom:5px!important}.mb-6{margin-bottom:6px!important}.mb-7{margin-bottom:7px!important}.mb-8{margin-bottom:8px!important}.mb-9{margin-bottom:9px!important}.mb-10{margin-bottom:10px!important}.mb-15{margin-bottom:15px!important}.mb-20{margin-bottom:20px!important}.mb-25{margin-bottom:25px!important}.mb-30{margin-bottom:30px!important}.mb-35{margin-bottom:35px!important}.mb-40{margin-bottom:40px!important}.mb-45{margin-bottom:45px!important}.mb-50{margin-bottom:50px!important}.ml-0{margin-left:0!important}.ml-1{margin-left:1px!important}.ml-2{margin-left:2px!important}.ml-3{margin-left:3px!important}.ml-4{margin-left:4px!important}.ml-5{margin-left:5px!important}.ml-6{margin-left:6px!important}.ml-7{margin-left:7px!important}.ml-8{margin-left:8px!important}.ml-9{margin-left:9px!important}.ml-10{margin-left:10px!important}.ml-15{margin-left:15px!important}.ml-20{margin-left:20px!important}.ml-25{margin-left:25px!important}.ml-30{margin-left:30px!important}.ml-35{margin-left:35px!important}.ml-40{margin-left:40px!important}.ml-45{margin-left:45px!important}.ml-50{margin-left:50px!important}.p-0{padding:0!important}.p-1{padding:1px!important}.p-2{padding:2px!important}.p-3{padding:3px!important}.p-4{padding:4px!important}.p-5{padding:5px!important}.p-6{padding:6px!important}.p-7{padding:7px!important}.p-8{padding:8px!important}.p-9{padding:9px!important}.p-10{padding:10px!important}.pt-0{padding-top:0!important}.pt-1{padding-top:1px!important}.pt-2{padding-top:2px!important}.pt-3{padding-top:3px!important}.pt-4{padding-top:4px!important}.pt-5{padding-top:5px!important}.pt-6{padding-top:6px!important}.pt-7{padding-top:7px!important}.pt-8{padding-top:8px!important}.pt-9{padding-top:9px!important}.pt-10{padding-top:10px!important}.pt-15{padding-top:15px!important}.pt-20{padding-top:20px!important}.pt-25{padding-top:25px!important}.pt-30{padding-top:30px!important}.pt-35{padding-top:35px!important}.pt-40{padding-top:40px!important}.pt-45{padding-top:45px!important}.pt-50{padding-top:50px!important}.pr-0{padding-right:0!important}.pr-1{padding-right:1px!important}.pr-2{padding-right:2px!important}.pr-3{padding-right:3px!important}.pr-4{padding-right:4px!important}.pr-5{padding-right:5px!important}.pr-6{padding-right:6px!important}.pr-7{padding-right:7px!important}.pr-8{padding-right:8px!important}.pr-9{padding-right:9px!important}.pr-10{padding-right:10px!important}.pr-15{padding-right:15px!important}.pr-20{padding-right:20px!important}.pr-25{padding-right:25px!important}.pr-30{padding-right:30px!important}.pr-35{padding-right:35px!important}.pr-40{padding-right:40px!important}.pr-45{padding-right:45px!important}.pr-50{padding-right:50px!important}.pb-0{padding-bottom:0!important}.pb-1{padding-bottom:1px!important}.pb-2{padding-bottom:2px!important}.pb-3{padding-bottom:3px!important}.pb-4{padding-bottom:4px!important}.pb-5{padding-bottom:5px!important}.pb-6{padding-bottom:6px!important}.pb-7{padding-bottom:7px!important}.pb-8{padding-bottom:8px!important}.pb-9{padding-bottom:9px!important}.pb-10{padding-bottom:10px!important}.pb-15{padding-bottom:15px!important}.pb-20{padding-bottom:20px!important}.pb-25{padding-bottom:25px!important}.pb-30{padding-bottom:30px!important}.pb-35{padding-bottom:35px!important}.pb-40{padding-bottom:40px!important}.pb-45{padding-bottom:45px!important}.pb-50{padding-bottom:50px!important}.pl-0{padding-left:0!important}.pl-1{padding-left:1px!important}.pl-2{padding-left:2px!important}.pl-3{padding-left:3px!important}.pl-4{padding-left:4px!important}.pl-5{padding-left:5px!important}.pl-6{padding-left:6px!important}.pl-7{padding-left:7px!important}.pl-8{padding-left:8px!important}.pl-9{padding-left:9px!important}.pl-10{padding-left:10px!important}.pl-15{padding-left:15px!important}.pl-20{padding-left:20px!important}.pl-25{padding-left:25px!important}.pl-30{padding-left:30px!important}.pl-35{padding-left:35px!important}.pl-40{padding-left:40px!important}.pl-45{padding-left:45px!important}.pl-50{padding-left:50px!important}.fl{float:left!important}.fr{float:right!important}.tc{text-align:center!important}.tr{text-align:right!important}.tl{text-align:left!important}.lh-2{line-height:2px}.lh-4{line-height:4px}.lh-6{line-height:6px}.lh-8{line-height:8px}.lh-10{line-height:10px}.lh-12{line-height:12px}.lh-14{line-height:14px}.lh-16{line-height:16px}.lh-18{line-height:18px}.lh-20{line-height:20px}.lh-22{line-height:22px}.lh-24{line-height:24px}.lh-26{line-height:26px}.lh-28{line-height:28px}.lh-30{line-height:30px}.lh-32{line-height:32px}.lh-34{line-height:34px}.lh-36{line-height:36px}.lh-38{line-height:38px}.lh-40{line-height:40px}.lh-42{line-height:42px}.lh-44{line-height:44px}.lh-46{line-height:46px}.lh-48{line-height:48px}.lh-50{line-height:50px}.lh-60{line-height:60px}.lh-5{line-height:5px}.lh-15{line-height:15px}.lh-25{line-height:25px}.lh-35{line-height:35px}.lh-45,.lh-55{line-height:45px}.w-0{width:0}.w-5{width:5px}.w-10{width:10px}.w-15{width:15px}.w-20{width:20px}.w-25{width:25px}.w-30{width:30px}.w-35{width:35px}.w-40{width:40px}.w-45{width:45px}.w-50{width:50px}.w-55{width:55px}.w-60{width:60px}.w-65{width:65px}.w-70{width:70px}.w-75{width:75px}.w-80{width:80px}.w-85{width:85px}.w-90{width:90px}.w-95{width:95px}.w-100{width:100px}.w-110{width:110px}.w-120{width:120px}.w-130{width:130px}.w-140{width:140px}.w-150{width:150px}.w-160{width:160px}.w-170{width:170px}.w-180{width:180px}.w-190{width:190px}.w-200{width:200px}.h-0{height:0}.h-5{height:5px}.h-10{height:10px}.h-15{height:15px}.h-20{height:20px}.h-25{height:25px}.h-30{height:30px}.h-35{height:35px}.h-40{height:40px}.h-45{height:45px}.h-50{height:50px}.h-55{height:55px}.h-60{height:60px}.h-65{height:65px}.h-70{height:70px}.h-75{height:75px}.h-80{height:80px}.h-85{height:85px}.h-90{height:90px}.h-95{height:95px}.h-100{height:100px}.h-110{height:110px}.h-120{height:120px}.h-130{height:130px}.h-140{height:140px}.h-150{height:150px}.h-160{height:160px}.h-170{height:170px}.h-180{height:180px}.h-190{height:190px}.h-200{height:200px}.pointer{cursor:pointer}.block{display:block}.none{display:none}.inline{display:inline}.inline-block{display:inline-block}.absolute{position:absolute}.fixed{position:fixed}.clearfix:after,.clearfix:before{content:" ";display:table}.ellipsis{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.disabled{opacity:.7;filter:alpha(opacity=70);pointer-events:none} 2 | @font-face { 3 | font-family: 'iconfont'; /* project id 171342 */ 4 | src: url('//at.alicdn.com/t/font_3nkqinn75tkv5cdi.eot'); 5 | src: url('//at.alicdn.com/t/font_3nkqinn75tkv5cdi.eot?#iefix') format('embedded-opentype'), 6 | url('//at.alicdn.com/t/font_3nkqinn75tkv5cdi.woff') format('woff'), 7 | url('//at.alicdn.com/t/font_3nkqinn75tkv5cdi.ttf') format('truetype'), 8 | url('//at.alicdn.com/t/font_3nkqinn75tkv5cdi.svg#iconfont') format('svg'); 9 | } 10 | .iconfont { 11 | font-family:"iconfont" !important; 12 | font-size:16px; 13 | font-style:normal; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | body { 18 | font-family: Helvetica, "Helvetica Neue", STHeiTi, sans-serif; 19 | } 20 | 21 | body { 22 | background-color: #F0F0F0; 23 | } 24 | 25 | /**/ 26 | header { 27 | width: 100%; 28 | height: 3.6rem; 29 | background: #fff url("http://cdn.gezlife.net/images/temp/hbg.png") center; 30 | background-size: cover; 31 | padding-top: 0.3rem; 32 | } 33 | 34 | 35 | .c-item *,.c-item *{ 36 | padding:0; 37 | margin:0; 38 | } 39 | .logo { 40 | position: relative; 41 | width: 1.5rem; 42 | height: 1.5rem; 43 | margin: 0 auto; 44 | -webkit-border-radius: 100%; 45 | -moz-border-radius: 100%; 46 | border-radius: 100%; 47 | background-color: #fff; 48 | } 49 | 50 | .logo img { 51 | max-width: 100%; 52 | max-height: 100%; 53 | position: absolute; 54 | left: 50%; 55 | top: 50%; 56 | -webkit-transform: translate(-50%, -50%); 57 | -moz-transform: translate(-50%, -50%); 58 | -ms-transform: translate(-50%, -50%); 59 | -o-transform: translate(-50%, -50%); 60 | transform: translate(-50%, -50%); 61 | } 62 | 63 | header h3 { 64 | font-size: 20px; 65 | margin: 0.3rem 0 0 0; 66 | color: #fffffe; 67 | font-weight: normal; 68 | } 69 | 70 | header p { 71 | color: #f0f0f0; 72 | margin: 0.15rem 0 0 0; 73 | padding: 0; 74 | font-size: 14px; 75 | } 76 | 77 | /**/ 78 | .c-item { 79 | background-color: #fff; 80 | margin-top: 0.266rem; 81 | padding: 0.266rem 0; 82 | } 83 | 84 | .icn-item { 85 | position: relative; 86 | display: inline-block; 87 | width: 1.33rem; 88 | height: 1.33rem; 89 | border-radius: 100%; 90 | margin-top: 0.15rem; 91 | } 92 | .icn-item-name{ 93 | padding-top:0.1rem; 94 | } 95 | .icn-item .iconfont{ 96 | position: absolute; 97 | color: #fff; 98 | font-size:32px; 99 | top:50%; 100 | left:50%; 101 | -webkit-transform: translate(-50%, -50%); 102 | -moz-transform: translate(-50%, -50%); 103 | -ms-transform: translate(-50%, -50%); 104 | -o-transform: translate(-50%, -50%); 105 | transform: translate(-50%, -50%); 106 | } 107 | 108 | .bg-brown { 109 | background-color: #DB9E4C; 110 | } 111 | 112 | .bg-blue { 113 | background-color: #4276D4; 114 | } 115 | 116 | .bg-pink { 117 | background-color: #FF7694; 118 | } 119 | 120 | /*swiperbox1*/ 121 | .swiperbox1{ 122 | height:5.33rem; 123 | margin-top:0.266rem; 124 | } 125 | .swiper-slide img{ 126 | display: none; 127 | } 128 | .swiper-slide a{ 129 | display: inline-block; 130 | width: 100%; 131 | height: 100%; 132 | } 133 | .swiper-slide { 134 | position: relative; 135 | display: block; 136 | width:100%; 137 | height:100%; 138 | background-position: center; 139 | background-repeat: no-repeat; 140 | background-size: cover; 141 | } 142 | .swiperbox1 .swiper-pagination .swiper-pagination-bullet{ 143 | width:0.15rem; 144 | height:0.15rem; 145 | } 146 | .swiperbox1 .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { 147 | margin: 0 0.1rem !important; 148 | } 149 | 150 | 151 | /*swiperbox2*/ 152 | .swiperbox2{ 153 | height:4.2666rem; 154 | margin-top:0; 155 | } 156 | .showname{ 157 | padding: 0.2666rem; 158 | text-align: center; 159 | color: #fff; 160 | font-size: 16px; 161 | background: rgba(0,0,0,0.5); 162 | margin-top: 1.64rem; 163 | } 164 | 165 | /**/ 166 | .title{ 167 | margin-top: 0.266rem; 168 | padding: 0.2666rem 0; 169 | background-color: #ffffff; 170 | -webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,.1); 171 | -moz-box-shadow: 0 5px 10px 0 rgba(0,0,0,.1); 172 | box-shadow: 0 5px 10px 0 rgba(0,0,0,.1); 173 | } 174 | .title h3{ 175 | font-weight: normal; 176 | font-size: 20px; 177 | margin:0; 178 | padding:0; 179 | } 180 | .title div{ 181 | color: #666666; 182 | margin-top: 0.0666rem; 183 | } 184 | 185 | 186 | /**/ 187 | .brand-item{ 188 | position: relative; 189 | width: 4rem; 190 | height:1.3333rem; 191 | border:1px solid #E3E3E3; 192 | } 193 | .brand-item img{ 194 | max-height: 100%; 195 | max-width: 100%; 196 | position: absolute; 197 | top:50%; 198 | left:50%; 199 | -webkit-transform: translate(-50%, -50%); 200 | -moz-transform: translate(-50%, -50%); 201 | -ms-transform: translate(-50%, -50%); 202 | -o-transform: translate(-50%, -50%); 203 | transform: translate(-50%, -50%); 204 | } 205 | .brands{ 206 | overflow-x: auto; 207 | background-color: #ffffff; 208 | padding-bottom: 0.2666rem; 209 | } 210 | .brand-item{ 211 | float: left; 212 | margin:0 0.133rem; 213 | 214 | } 215 | .pro-item{ 216 | display: inline-block; 217 | width: 4.5333rem; 218 | height: 5.46666rem; 219 | background-color: #ffffff; 220 | margin: 0.16rem; 221 | -webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,.1); 222 | -moz-box-shadow: 0 5px 10px 0 rgba(0,0,0,.1); 223 | box-shadow: 0 5px 10px 0 rgba(0,0,0,.1); 224 | } 225 | .pro-item a{ 226 | position: relative; 227 | display: block; 228 | width: 4.5333rem; 229 | height: 4.5333rem; 230 | } 231 | .pro-item img{ 232 | width:100%; 233 | height:100%; 234 | } 235 | .pro-item h3{ 236 | margin:0; 237 | text-align: center; 238 | font-weight: normal; 239 | width:100%; 240 | padding: 0.2666rem 0 0 0; 241 | } 242 | .prolist{ 243 | margin-top: 0.2666rem; 244 | } 245 | .tag-pro{ 246 | position: absolute; 247 | top:0; 248 | left:0; 249 | width: 1.6rem!important; 250 | height: 1.6rem!important; 251 | } 252 | .seemore{ 253 | margin: 0.2666rem; 254 | } 255 | .morebtn{ 256 | margin:0.2666rem auto; 257 | display: inline-block; 258 | width: 8.133rem; 259 | height: 1rem; 260 | line-height: 1rem; 261 | text-align: center; 262 | border-radius: 1rem; 263 | color: #ffffff; 264 | font-size: 16px; 265 | background: #f13268; 266 | background: -moz-linear-gradient(top, #f13268 0%, #e7365d 35%, #e33756 64%, #e13754 74%, #de3b4e 90%, #dc3848 94%, #dc3848 100%); 267 | background: -webkit-gradient(left top, left bottom, color-stop(0%, #f13268), color-stop(35%, #e7365d), color-stop(64%, #e33756), color-stop(74%, #e13754), color-stop(90%, #de3b4e), color-stop(94%, #dc3848), color-stop(100%, #dc3848)); 268 | background: -webkit-linear-gradient(top, #f13268 0%, #e7365d 35%, #e33756 64%, #e13754 74%, #de3b4e 90%, #dc3848 94%, #dc3848 100%); 269 | background: -o-linear-gradient(top, #f13268 0%, #e7365d 35%, #e33756 64%, #e13754 74%, #de3b4e 90%, #dc3848 94%, #dc3848 100%); 270 | background: -ms-linear-gradient(top, #f13268 0%, #e7365d 35%, #e33756 64%, #e13754 74%, #de3b4e 90%, #dc3848 94%, #dc3848 100%); 271 | background: linear-gradient(to bottom, #f13268 0%, #e7365d 35%, #e33756 64%, #e13754 74%, #de3b4e 90%, #dc3848 94%, #dc3848 100%); 272 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f13268', endColorstr='#dc3848', GradientType=0 ); 273 | -webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,.1); 274 | -moz-box-shadow: 0 5px 10px 0 rgba(0,0,0,.1); 275 | box-shadow: 0 5px 10px 0 rgba(0,0,0,.1); 276 | } 277 | 278 | /**/ 279 | .planlist-item{ 280 | display: inline-block; 281 | background-color: #ffffff; 282 | -webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,.1); 283 | -moz-box-shadow: 0 5px 10px 0 rgba(0,0,0,.1); 284 | box-shadow: 0 5px 10px 0 rgba(0,0,0,.1); 285 | } 286 | .planlist-item a{ 287 | position: relative; 288 | display: block; 289 | width: 9.4666rem; 290 | height: 7.1rem; 291 | } 292 | .planlist-item a img{ 293 | width:100%; 294 | height:100%; 295 | } 296 | .prodesc{ 297 | padding: 0.4rem 0.2rem; 298 | } 299 | .prodesc h3{ 300 | margin:0; 301 | padding:0; 302 | font-size:16px; 303 | } 304 | 305 | 306 | .seenum .iconfont{ 307 | font-size:20px; 308 | } 309 | 310 | .prodesc .desc{ 311 | margin-top: 0.0666rem; 312 | } 313 | .planlist{ 314 | margin-top: 0.6666rem; 315 | } 316 | .seenum span{ 317 | position: relative; 318 | top: 0.08rem; 319 | } 320 | .planlist-item{ 321 | margin-bottom: 0.66666rem; 322 | } 323 | .totop{ 324 | position: fixed; 325 | right:0.1333rem; 326 | bottom:2rem; 327 | width:0.8rem; 328 | height:0.8rem; 329 | background-color: rgba(0,0,0,0.5); 330 | text-align: center; 331 | line-height: 0.8rem; 332 | border-radius: 100%; 333 | } 334 | .totop .iconfont{ 335 | color: #ffffff; 336 | font-size: 20px; 337 | } 338 | -------------------------------------------------------------------------------- /temp/nn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chenlong-io/adaptive/0a83a55db967df26d94b9eba5c44c6351ae14015/temp/nn.jpg -------------------------------------------------------------------------------- /temp/vv.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chenlong-io/adaptive/0a83a55db967df26d94b9eba5c44c6351ae14015/temp/vv.jpg --------------------------------------------------------------------------------