wangshusheng / YOHOBUYPC · Commits

Go to a project

Authored by xuqi
Commit d5e22192dbd6910f862ab577fc8e75b9b015c53d 1 parent e6f4ea32

media query -> class control.Review by@xuqi

Inline Side-by-side
Showing 10 changed files with 130 additions and 161 deletions
@@ -11,39 +11,15 @@ @@ -11,39 +11,15 @@
11 <title>{{title}}</title> 11 <title>{{title}}</title>
12 {{#if rlsEnv}} 12 {{#if rlsEnv}}
13 <link rel="stylesheet" href="http://cdn.yoho.cn/yohobuy/{{version}}/index.css"> 13 <link rel="stylesheet" href="http://cdn.yoho.cn/yohobuy/{{version}}/index.css">
14 - <!--[if lt IE 9]>  
15 - <script src="http://cdn.yoho.cn/yohobuy/respond/respond.min.js"></script>  
16 - <link href="http://cdn.yoho.cn/yohobuy/respond/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />  
17 - <script src="http://cdn.yoho.cn/yohobuy/respond/respond.proxy.js"></script>  
18 - <link href="http://cdn.yoho.cn/yohobuy/respond/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />  
19 - <![endif]-->  
20 {{/if}} 14 {{/if}}
21 {{#if preEnv}} 15 {{#if preEnv}}
22 <link rel="stylesheet" href="http://cdn.yoho.cn/yohobuy/{{version}}/index.css"> 16 <link rel="stylesheet" href="http://cdn.yoho.cn/yohobuy/{{version}}/index.css">
23 - <!--[if lt IE 9]>  
24 - <script src="http://cdn.yoho.cn/yohobuy/respond/respond.min.js"></script>  
25 - <link href="http://cdn.yoho.cn/yohobuy/respond/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />  
26 - <script src="http://cdn.yoho.cn/yohobuy/respond/respond.proxy.js"></script>  
27 - <link href="http://cdn.yoho.cn/yohobuy/respond/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />  
28 - <![endif]-->  
29 {{/if}} 17 {{/if}}
30 {{#if testEnv}} 18 {{#if testEnv}}
31 <link rel="stylesheet" href="http://static.buy.test.yoho.cn/dist/yohobuy/{{version}}/index.css"> 19 <link rel="stylesheet" href="http://static.buy.test.yoho.cn/dist/yohobuy/{{version}}/index.css">
32 - <!--[if lt IE 9]>  
33 - <script src="http://static.buy.test.yoho.cn/dist/yohobuy/respond/respond.min.js"></script>  
34 - <link href="http://static.buy.test.yoho.cn/dist/yohobuy/respond/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />  
35 - <script src="http://static.buy.test.yoho.cn/dist/yohobuy/respond/respond.proxy.js"></script>  
36 - <link href="http://static.buy.test.yoho.cn/dist/yohobuy/respond/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />  
37 - <![endif]-->  
38 {{/if}} 20 {{/if}}
39 {{#if devEnv}} 21 {{#if devEnv}}
40 <link rel="stylesheet" href="http://webstatic.dev.yohobuy.com/css/index.css"> 22 <link rel="stylesheet" href="http://webstatic.dev.yohobuy.com/css/index.css">
41 - <!--[if lt IE 9]>  
42 - <script src="http://webstatic.dev.yohobuy.com/plugin/page/respond/respond.min.js"></script>  
43 - <link href="http://webstatic.dev.yohobuy.com/plugin/page/respond/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />  
44 - <script src="http://webstatic.dev.yohobuy.com/plugin/page/respond/respond.proxy.js"></script>  
45 - <link href="http://webstatic.dev.yohobuy.com/plugin/page/respond/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />  
46 - <![endif]-->  
47 {{/if}} 23 {{/if}}
48 </head> 24 </head>
49 <body> 25 <body>
@@ -5,9 +5,9 @@ @@ -5,9 +5,9 @@
5 */ 5 */
6 var $ = require('yoho.jquery'); 6 var $ = require('yoho.jquery');
7 7
8 -require('./footer');  
9 - 8 +var $body = $('body');
10 9
  10 +require('./footer');
11 11
12 12
13 function cookie(name) { 13 function cookie(name) {
@@ -96,20 +96,20 @@ function getShoppingKey() { @@ -96,20 +96,20 @@ function getShoppingKey() {
96 } 96 }
97 97
98 //YAS统计代码 98 //YAS统计代码
99 -//(function(w, d, s, j, f) {  
100 -// var a = d.createElement(s);  
101 -// var m = d.getElementsByTagName(s)[0];  
102 -//  
103 -// w.YohoAcquisitionObject = f;  
104 -//  
105 -// w[f] = function() {  
106 -// w[f].p = arguments;  
107 -// };  
108 -//  
109 -// a.async = 1;  
110 -// a.src = j;  
111 -// m.parentNode.insertBefore(a, m);  
112 -//})(window, document, 'script', 'http://cdn.yoho.cn/yas-jssdk/1.0.14/yas.js', '_yas'); 99 +(function(w, d, s, j, f) {
  100 + var a = d.createElement(s);
  101 + var m = d.getElementsByTagName(s)[0];
  102 +
  103 + w.YohoAcquisitionObject = f;
  104 +
  105 + w[f] = function() {
  106 + w[f].p = arguments;
  107 + };
  108 +
  109 + a.async = 1;
  110 + a.src = j;
  111 + m.parentNode.insertBefore(a, m);
  112 +})(window, document, 'script', 'http://cdn.yoho.cn/yas-jssdk/1.0.14/yas.js', '_yas');
113 113
114 (function() { 114 (function() {
115 var uid = getUid(); 115 var uid = getUid();
@@ -123,6 +123,25 @@ function getShoppingKey() { @@ -123,6 +123,25 @@ function getShoppingKey() {
123 } 123 }
124 }()); 124 }());
125 125
  126 +//window.resize在width<1180时适配成990
  127 +$(window).on('resize', function() {
  128 + var w = $(this).width();
  129 +
  130 + //return top
  131 + if (w < 1360) {
  132 + $('.return-top').addClass('min');
  133 + } else {
  134 + $('.return-top').removeClass('min');
  135 + }
  136 +
  137 + //body
  138 + if (w < 1180) {
  139 + $body.addClass('min-screen');
  140 + } else {
  141 + $body.removeClass('min-screen');
  142 + }
  143 +}).trigger('resize');
  144 +
126 window.cookie = cookie; 145 window.cookie = cookie;
127 146
128 window.setCookie = setCookie; 147 window.setCookie = setCookie;
@@ -132,9 +151,3 @@ window.getUser = getUser; @@ -132,9 +151,3 @@ window.getUser = getUser;
132 window.getUid = getUid; 151 window.getUid = getUid;
133 152
134 window.getShoppingKey = getShoppingKey; 153 window.getShoppingKey = getShoppingKey;
135 -if($('.simple-header').hasClass('simple-header')){  
136 - require('./simple-header');  
137 -}else{  
138 - require('./header');  
139 -}  
140 -  
@@ -355,51 +355,46 @@ @@ -355,51 +355,46 @@
355 } 355 }
356 } 356 }
357 357
358 -@media (max-width: 1360px) {  
359 - .yoho-footer .return-top {  
360 - left: 100%;  
361 - right: 20px;  
362 - margin-left: auto;  
363 - } 358 +.yoho-footer .return-top.min {
  359 + left: 100%;
  360 + right: 20px;
  361 + margin-left: auto;
364 } 362 }
365 363
366 -@media (max-width:1180px) {  
367 - .yoho-footer {  
368 -  
369 - .index-foot dd {  
370 - width: 316px;  
371 -  
372 - .two-dim {  
373 - margin-top: 26px;  
374 - margin-bottom: 10px;  
375 - overflow: hidden;  
376 - } 364 +.min-screen .yoho-footer {
  365 + .index-foot dd {
  366 + width: 316px;
377 367
378 - .dim-img {  
379 - width: 69px;  
380 - height: 69px;  
381 - } 368 + .two-dim {
  369 + margin-top: 26px;
  370 + margin-bottom: 10px;
  371 + overflow: hidden;
  372 + }
382 373
383 - .mobile img {  
384 - width: 85px;  
385 - height: 108px;  
386 - } 374 + .dim-img {
  375 + width: 69px;
  376 + height: 69px;
387 } 377 }
388 378
389 - .promise .left {  
390 - margin-right: 45px; 379 + .mobile img {
  380 + width: 85px;
  381 + height: 108px;
391 } 382 }
  383 + }
392 384
393 - .subscribe {  
394 - width: 200px; 385 + .promise .left {
  386 + margin-right: 45px;
  387 + }
395 388
396 - input {  
397 - width: 140px;  
398 - }  
399 - } 389 + .subscribe {
  390 + width: 200px;
400 391
401 - .footer-help li {  
402 - width: 150px; 392 + input {
  393 + width: 140px;
403 } 394 }
404 } 395 }
  396 +
  397 + .footer-help li {
  398 + width: 150px;
  399 + }
405 } 400 }
@@ -80,10 +80,8 @@ input,textarea { @@ -80,10 +80,8 @@ input,textarea {
80 margin-right: auto; 80 margin-right: auto;
81 } 81 }
82 82
83 -@media (max-width: 1180px) {  
84 - .center-content {  
85 - width: 990px;  
86 - } 83 +.min-screen .center-content {
  84 + width: 990px;
87 } 85 }
88 86
89 @import "home/index", "product/index", "guang/index", "passport/index", "error", "order/index", "sale/index"; 87 @import "home/index", "product/index", "guang/index", "passport/index", "error", "order/index", "sale/index";
@@ -387,8 +387,6 @@ @@ -387,8 +387,6 @@
387 } 387 }
388 } 388 }
389 389
390 -@media (max-width: 1180px) {  
391 - .filter-box .brand .attr {  
392 - width: 25%;  
393 - } 390 +.min-screen .filter-box .brand .attr {
  391 + width: 25%;
394 } 392 }
@@ -51,36 +51,33 @@ @@ -51,36 +51,33 @@
51 } 51 }
52 52
53 /*990px*/ 53 /*990px*/
54 -@media (max-width: 1180px) { 54 +.min-screen .product-list-page, .new-sale-page {
55 55
56 - .product-list-page, .new-sale-page {  
57 -  
58 - .list-right {  
59 - width: 810px;  
60 - }  
61 -  
62 - .goods-container {  
63 - height: auto;  
64 - padding-top: 25px;  
65 - position: relative;  
66 - width: 810px + 10px;//每列增加右边距 56 + .list-right {
  57 + width: 810px;
  58 + }
67 59
68 - .good-info {  
69 - width: 195px; 60 + .goods-container {
  61 + height: auto;
  62 + padding-top: 25px;
  63 + position: relative;
  64 + width: 810px + 10px;//每列增加右边距
70 65
71 - .good-detail-img {  
72 - height: 261px;  
73 - }  
74 - } 66 + .good-info {
  67 + width: 195px;
75 68
76 - .block-next-page {  
77 - width: 195px; 69 + .good-detail-img {
78 height: 261px; 70 height: 261px;
79 } 71 }
80 } 72 }
81 73
82 - .filter-box .brand .attr-content {  
83 - max-width: 570px; 74 + .block-next-page {
  75 + width: 195px;
  76 + height: 261px;
84 } 77 }
85 } 78 }
  79 +
  80 + .filter-box .brand .attr-content {
  81 + max-width: 570px;
  82 + }
86 } 83 }
@@ -49,20 +49,18 @@ @@ -49,20 +49,18 @@
49 } 49 }
50 } 50 }
51 51
52 -@media (max-width: 1180px) {  
53 - .latest-walk {  
54 - .goods {  
55 - width: 820px;  
56 - height: 301px;  
57 - } 52 +.min-screen .latest-walk {
  53 + .goods {
  54 + width: 820px;
  55 + height: 301px;
  56 + }
58 57
59 - .good {  
60 - margin-right: 10px;  
61 - } 58 + .good {
  59 + margin-right: 10px;
  60 + }
62 61
63 - img {  
64 - width: 195px;  
65 - height: 261px;  
66 - } 62 + img {
  63 + width: 195px;
  64 + height: 261px;
67 } 65 }
68 } 66 }
@@ -212,21 +212,19 @@ @@ -212,21 +212,19 @@
212 } 212 }
213 } 213 }
214 214
215 -@media (max-width: 1180px) {  
216 - .product-list-page .sort-intro {  
217 - .texts {  
218 - width: 346px;  
219 - height: 248px;  
220 - padding: 0 30px;  
221 - } 215 +.min-screen .product-list-page .sort-intro {
  216 + .texts {
  217 + width: 346px;
  218 + height: 248px;
  219 + padding: 0 30px;
  220 + }
222 221
223 - .name {  
224 - margin-top: 30px;  
225 - } 222 + .name {
  223 + margin-top: 30px;
  224 + }
226 225
227 - .img {  
228 - width: 400px;  
229 - height: 250px;  
230 - } 226 + .img {
  227 + width: 400px;
  228 + height: 250px;
231 } 229 }
232 } 230 }
@@ -190,8 +190,6 @@ @@ -190,8 +190,6 @@
190 } 190 }
191 } 191 }
192 192
193 -@media (max-width: 1180px) {  
194 - .new-sale-page .new-brands .brands-wrap {  
195 - width: 730px;  
196 - } 193 +.min-screen .new-sale-page .new-brands .brands-wrap {
  194 + width: 730px;
197 } 195 }
@@ -19,30 +19,28 @@ @@ -19,30 +19,28 @@
19 19
20 20
21 /*990px*/ 21 /*990px*/
22 -@media (max-width: 1180px) {  
23 - .product-search-page {  
24 - .goods-container {  
25 - height: auto;  
26 - padding-top: 25px;  
27 - position: relative;  
28 - width: 990px + 10px; //每列增加右边距  
29 -  
30 - .good-info {  
31 - width: 190px;  
32 -  
33 - .good-detail-img {  
34 - height: 255px;  
35 - }  
36 - } 22 +.min-scrren .product-search-page {
  23 + .goods-container {
  24 + height: auto;
  25 + padding-top: 25px;
  26 + position: relative;
  27 + width: 990px + 10px; //每列增加右边距
37 28
38 - .block-next-page {  
39 - width: 190px; 29 + .good-info {
  30 + width: 190px;
  31 +
  32 + .good-detail-img {
40 height: 255px; 33 height: 255px;
41 } 34 }
42 } 35 }
43 36
44 - .filter-box .brand .attr-content {  
45 - max-width: 750px; 37 + .block-next-page {
  38 + width: 190px;
  39 + height: 255px;
46 } 40 }
47 } 41 }
  42 +
  43 + .filter-box .brand .attr-content {
  44 + max-width: 750px;
  45 + }
48 } 46 }