質問編集履歴

3

文書の修正

2021/12/14 01:56

投稿

soraatori
soraatori

スコア55

test CHANGED
File without changes
test CHANGED
@@ -22,103 +22,181 @@
22
22
 
23
23
  ```html
24
24
 
25
+ <!DOCTYPE html>
26
+
27
+ <html lang="ja">
28
+
29
+
30
+
31
+ <head>
32
+
33
+ <meta charset="UTF-8">
34
+
35
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
36
+
37
+ <meta name="format-detection" content="telephone=no,address=no,email=no">
38
+
39
+ <meta id="viewport" name="viewport" content="width=device-width">
40
+
41
+ <meta name="description" content="サイトの説明、概要">
42
+
43
+ <link rel="stylesheet" type="text/css" href="css/vendor.css">
44
+
45
+ <link rel="stylesheet" type="text/css" href="css/sanitize.css">
46
+
47
+ <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.4/vegas.min.css">
48
+
49
+ <link rel="stylesheet" type="text/css" href="css/6-1-3.css">
50
+
51
+ <link rel="stylesheet" type="text/css" href="style.css">
52
+
53
+ <title></title>
54
+
55
+ </head>
56
+
57
+
58
+
59
+ <body>
60
+
61
+ <header id="header">
62
+
25
- <div class="header">
63
+ <div class="header">
26
-
64
+
27
- <div class="full">
65
+ <div class="full">
28
-
66
+
29
- <div id="slider"></div>
67
+ <div id="slider"></div>
30
-
68
+
31
- <div class="inner">
69
+ <div class="inner">
32
-
70
+
33
- <ul>
71
+ <ul>
34
-
35
- <li>
36
-
37
- <ul class="drop-nav">
38
72
 
39
73
  <li>
40
74
 
75
+ <ul class="drop-nav">
76
+
77
+ <li>
78
+
41
- <div class="header-logo">
79
+ <div class="header-logo">
42
-
80
+
43
- <h1><a href="index.html"><img src="img/header_logo.jpg" width="252" height="50"
81
+ <h1><a href="index.html"><img src="img/header_logo.jpg" width="252" height="50" alt=""></a>
44
-
45
- alt=""></a>
82
+
46
-
47
- </h1>
83
+ </h1>
48
-
84
+
49
- </div>
85
+ </div>
86
+
87
+ </li>
88
+
89
+ <li>
90
+
91
+ <div class="hamburger">
92
+
93
+ <span></span>
94
+
95
+ <span></span>
96
+
97
+ <span></span>
98
+
99
+ </div>
100
+
101
+ </li>
102
+
103
+ </ul>
50
104
 
51
105
  </li>
52
106
 
53
107
  <li>
54
108
 
109
+ <nav id="nav">
110
+
55
- <div class="hamburger">
111
+ <div class="nav pc-block">
112
+
56
-
113
+ <ul>
114
+
57
- <span></span>
115
+ <li></li>
58
-
116
+
59
- <span></span>
117
+ </ul>
60
-
61
- <span></span>
118
+
62
-
63
- </div>
119
+ </div>
120
+
121
+ </nav>
64
122
 
65
123
  </li>
66
124
 
67
125
  </ul>
68
126
 
127
+ </div>
128
+
129
+ <div class="catch-copy">
130
+
131
+ <ul>
132
+
133
+ <li>
134
+
135
+ <h2>より良いサービスと<br>統一的な品質管理</h2>
136
+
69
- </li>
137
+ </li>
70
-
138
+
71
- <li>
139
+ <li>
140
+
72
-
141
+ <figure>
142
+
143
+ <img src="img/top_logo.svg" width="196.6401" height="203.3197" alt="">
144
+
73
- <nav id="nav">
145
+ </figure>
74
-
146
+
75
- <div class="nav pc-block">
147
+ </li>
76
-
148
+
77
- <ul>
149
+ <li>
150
+
78
-
151
+ <h2>生産者と消費者を<br>「安心」で結ぶ懸け橋</h2>
152
+
79
- <li></li>
153
+ </li>
80
-
154
+
81
- </ul>
155
+ </ul>
82
-
156
+
83
- </div>
157
+ </div>
84
-
158
+
85
- </nav>
159
+ </div>
86
-
87
- </li>
88
-
89
- </ul>
90
160
 
91
161
  </div>
92
162
 
93
- <div class="catch-copy">
94
-
95
- <ul>
96
-
97
- <li>
98
-
99
- <h2>より良いサービスと<br>統一的な品質管理</h2>
100
-
101
- </li>
102
-
103
- <li>
104
-
105
- <figure>
106
-
107
- <img src="img/top_logo.svg" width="196.6401" height="203.3197" alt="">
108
-
109
- </figure>
163
+ </header>
110
-
164
+
165
+
166
+
111
- </li>
167
+ <main id="main">
112
-
113
- <li>
168
+
114
-
115
- <h2>生産者と消費者を<br>「安心」で結ぶ懸け橋</h2>
116
-
117
- </li>
118
-
119
- </ul>
120
-
121
- </div>
169
+ </main>
170
+
171
+
172
+
173
+ <footer id="footer">
174
+
175
+ </footer>
176
+
177
+
178
+
179
+ <script src="https://code.jquery.com/jquery-3.4.1.min.js"
180
+
181
+ integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
182
+
183
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.3/picturefill.js"></script>
184
+
185
+ <script src="js/vendor.js"></script>
186
+
187
+ <script src="js/script.js"></script>
188
+
189
+ <script src="js/vegas.min.js"></script>
190
+
191
+ <script src="js/6-1-3.js"></script>
192
+
193
+ <script src="js/viewport.js"></script>
194
+
195
+ </body>
196
+
197
+
198
+
199
+ </html>
122
200
 
123
201
  ```
124
202
 
@@ -126,288 +204,498 @@
126
204
 
127
205
  ```css
128
206
 
129
- header#header {
207
+ /* vender.css */
130
-
208
+
209
+
210
+
131
- .full {
211
+ ol, ul {
132
-
133
- position: relative;
212
+
134
-
135
- overflow: hidden;
136
-
137
-
138
-
139
- & > .inner {
140
-
141
- background-color: #fff;
142
-
143
- position: absolute;
144
-
145
- top: 0;
146
-
147
- width: 100%;
148
-
149
- box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
150
-
151
- transition: all 300ms;
152
-
153
-
154
-
155
- @include media(sp) {
156
-
157
- position: fixed;
213
+ list-style: none;
158
-
159
- z-index: 1;
214
+
160
-
161
- }
215
+ }
162
-
163
-
164
-
165
- & > ul {
166
-
167
- max-width: 1280px;
168
-
169
- display: flex;
170
-
171
- align-items: center;
172
-
173
- justify-content: space-between;
174
-
175
- margin: auto;
176
-
177
- min-height: 80px;
178
-
179
-
180
-
181
- @include media(sp) {
182
-
183
- width: 100%;
184
-
185
- }
186
-
187
-
188
-
189
- & > li {
190
-
191
- & > .drop-nav {
192
-
193
- @include media(sp) {
194
-
195
- position: fixed;
196
-
197
- width: 100%;
198
-
199
- padding: 0 5%;
200
-
201
- display: flex;
202
-
203
- align-items: center;
204
-
205
- justify-content: space-between;
206
-
207
- transition: 0.3s;
208
-
209
- top: 0;
210
-
211
- left: 0;
212
-
213
- z-index: 200;
214
-
215
- background-color: #fff;
216
-
217
- min-height: 80px;
218
-
219
- }
220
-
221
-
222
-
223
- & > li {
224
-
225
- & > .header-logo {
226
-
227
- & > h1 {
228
-
229
- & > a {
230
-
231
- & > img {
232
-
233
- @include media(sp) {
234
-
235
- width: 184px;
236
-
237
- height: 37px;
238
-
239
- }
240
-
241
- }
242
-
243
- }
244
-
245
- }
246
-
247
- }
248
-
249
- }
250
-
251
- }
252
-
253
- }
254
-
255
- }
256
-
257
- }
258
-
259
-
260
-
261
- .inner.fixed {
262
-
263
- position: fixed;
264
-
265
- z-index: 1;
266
-
267
- transition: all 1s;
268
-
269
-
270
-
271
- & > ul {
272
-
273
- @include media(sp) {
274
-
275
- width: 100%;
276
-
277
- padding: 0 5%;
278
-
279
- }
280
-
281
- }
282
-
283
- }
284
-
285
-
286
-
287
- .catch-copy {
288
-
289
- position: absolute;
290
-
291
- left: 50%;
292
-
293
- top: 14%;
294
-
295
- transform: translate(-50%, 0);
296
-
297
-
298
-
299
- @include media(sp) {
300
-
301
- left: 0;
302
-
303
- transform: none;
304
-
305
- width: 100%;
306
-
307
- }
308
-
309
-
310
-
311
- ul {
312
-
313
- display: flex;
314
-
315
- justify-content: space-between;
316
-
317
- align-items: flex-start;
318
-
319
- max-width: 660px;
320
-
321
- width: 100%;
322
-
323
-
324
-
325
- @include media(sp) {
326
-
327
- justify-content: center;
328
-
329
- flex-direction: column;
330
-
331
- align-items: center;
332
-
333
- }
334
-
335
-
336
-
337
- li {
338
-
339
- width: 33.3%;
340
-
341
-
342
-
343
- @include media(sp) {
344
-
345
- width: 100%;
346
-
347
- display: contents;
348
-
349
- }
350
-
351
-
352
-
353
- h2 {
354
-
355
- color: #fff;
356
-
357
- writing-mode: vertical-rl;
358
-
359
- font-size: 4rem;
360
-
361
- line-height: 2.5;
362
-
363
- font-family: $ja_min;
364
-
365
- letter-spacing: 0.1em;
366
-
367
-
368
-
369
- @include media(sp) {
370
-
371
- writing-mode: unset;
372
-
373
- font-size: 3rem;
374
-
375
- text-align: center;
376
-
377
- }
378
-
379
- }
380
-
381
-
382
-
383
- img {
384
-
385
- padding-top: 80px;
386
-
387
-
388
-
389
- @include media(sp) {
390
-
391
- width: 98px;
392
-
393
- height: 101px;
394
-
395
- padding: 0;
396
-
397
- }
398
-
399
- }
400
-
401
- }
402
-
403
- }
404
-
405
- }
406
216
 
407
217
  ```
408
218
 
409
219
 
410
220
 
221
+ ```css
222
+
223
+ /* 6-1-3.css */
224
+
225
+
226
+
227
+ @charset "utf-8";
228
+
229
+ #slider {
230
+
231
+ width: 100%;
232
+
233
+ height: 100vh;
234
+
235
+ }
236
+
237
+ ```
238
+
239
+
240
+
241
+ ```css
242
+
243
+ /* style.css */
244
+
245
+
246
+
247
+ @charset "UTF-8";
248
+
249
+ .center {
250
+
251
+ text-align: center;
252
+
253
+ }
254
+
255
+ .right {
256
+
257
+ text-align: right;
258
+
259
+ }
260
+
261
+ .justify {
262
+
263
+ text-align: justify;
264
+
265
+ }
266
+
267
+ html {
268
+
269
+ font-size: 62.5%;
270
+
271
+ }
272
+
273
+ body {
274
+
275
+ font-family: Noto Sans, Noto Sans CJK JP, sans-serif !important;
276
+
277
+ color: #333;
278
+
279
+ background: #fff;
280
+
281
+ font-size: 1.6rem;
282
+
283
+ line-height: 1.8;
284
+
285
+ text-align: justify;
286
+
287
+ }
288
+
289
+ @media only screen and (max-width: 767px) {
290
+
291
+ body {
292
+
293
+ font-size: 1.3rem;
294
+
295
+ }
296
+
297
+ }
298
+
299
+ body.is-fixed {
300
+
301
+ overflow: hidden;
302
+
303
+ width: 100%;
304
+
305
+ }
306
+
307
+ a {
308
+
309
+ text-decoration: none;
310
+
311
+ text-decoration-line: none;
312
+
313
+ outline: none;
314
+
315
+ color: #185096;
316
+
317
+ }
318
+
319
+ a:hover {
320
+
321
+ text-decoration: none;
322
+
323
+ opacity: 0.8;
324
+
325
+ }
326
+
327
+ main {
328
+
329
+ overflow: hidden;
330
+
331
+ display: block;
332
+
333
+ }
334
+
335
+ strong {
336
+
337
+ font-weight: 700;
338
+
339
+ }
340
+
341
+ div,
342
+
343
+ article,
344
+
345
+ aside,
346
+
347
+ details,
348
+
349
+ figcaption,
350
+
351
+ figure,
352
+
353
+ footer,
354
+
355
+ header,
356
+
357
+ hgroup,
358
+
359
+ menu,
360
+
361
+ nav,
362
+
363
+ section {
364
+
365
+ box-sizing: border-box;
366
+
367
+ }
368
+
369
+ img {
370
+
371
+ vertical-align: middle;
372
+
373
+ }
374
+
375
+ img {
376
+
377
+ max-width: 100%;
378
+
379
+ height: auto;
380
+
381
+ }
382
+
383
+ .flex-gmap,
384
+
385
+ .flex-video {
386
+
387
+ position: relative;
388
+
389
+ padding-bottom: 56.25%;
390
+
391
+ height: 0;
392
+
393
+ overflow: hidden;
394
+
395
+ }
396
+
397
+ .flex-gmap iframe,
398
+
399
+ .flex-gmap object,
400
+
401
+ .flex-gmap embed,
402
+
403
+ .flex-video iframe,
404
+
405
+ .flex-video object,
406
+
407
+ .flex-video embed {
408
+
409
+ position: absolute;
410
+
411
+ top: 0;
412
+
413
+ left: 0;
414
+
415
+ width: 100% !important;
416
+
417
+ height: 100% !important;
418
+
419
+ }
420
+
421
+ header#header .full {
422
+
423
+ position: relative;
424
+
425
+ overflow: hidden;
426
+
427
+ }
428
+
429
+ header#header .full > .inner {
430
+
431
+ background-color: #fff;
432
+
433
+ position: absolute;
434
+
435
+ top: 0;
436
+
437
+ width: 100%;
438
+
439
+ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
440
+
441
+ transition: all 0.3s;
442
+
443
+ }
444
+
445
+ @media only screen and (max-width: 767px) {
446
+
447
+ header#header .full > .inner {
448
+
449
+ position: fixed;
450
+
451
+ z-index: 1;
452
+
453
+ }
454
+
455
+ }
456
+
457
+ header#header .full > .inner > ul {
458
+
459
+ max-width: 1280px;
460
+
461
+ display: flex;
462
+
463
+ align-items: center;
464
+
465
+ justify-content: space-between;
466
+
467
+ margin: auto;
468
+
469
+ min-height: 80px;
470
+
471
+ }
472
+
473
+ @media only screen and (max-width: 767px) {
474
+
475
+ header#header .full > .inner > ul {
476
+
477
+ width: 100%;
478
+
479
+ }
480
+
481
+ }
482
+
483
+ @media only screen and (max-width: 767px) {
484
+
485
+ header#header .full > .inner > ul > li > .drop-nav {
486
+
487
+ position: fixed;
488
+
489
+ width: 100%;
490
+
491
+ padding: 0 5%;
492
+
493
+ display: -webkit-box;
494
+
495
+ display: -ms-flexbox;
496
+
497
+ display: flex;
498
+
499
+ align-items: center;
500
+
501
+ justify-content: space-between;
502
+
503
+ transition: 0.3s;
504
+
505
+ top: 0;
506
+
507
+ left: 0;
508
+
509
+ z-index: 200;
510
+
511
+ background-color: #fff;
512
+
513
+ min-height: 80px;
514
+
515
+ }
516
+
517
+ }
518
+
519
+ @media only screen and (max-width: 767px) {
520
+
521
+ header#header
522
+
523
+ .full
524
+
525
+ > .inner
526
+
527
+ > ul
528
+
529
+ > li
530
+
531
+ > .drop-nav
532
+
533
+ > li
534
+
535
+ > .header-logo
536
+
537
+ > h1
538
+
539
+ > a
540
+
541
+ > img {
542
+
543
+ width: 184px;
544
+
545
+ height: 37px;
546
+
547
+ }
548
+
549
+ }
550
+
551
+ header#header .full .inner.fixed {
552
+
553
+ position: fixed;
554
+
555
+ z-index: 1;
556
+
557
+ transition: all 1s;
558
+
559
+ }
560
+
561
+ @media only screen and (max-width: 767px) {
562
+
563
+ header#header .full .inner.fixed > ul {
564
+
565
+ width: 100%;
566
+
567
+ padding: 0 5%;
568
+
569
+ }
570
+
571
+ }
572
+
573
+ header#header .full .catch-copy {
574
+
575
+ position: absolute;
576
+
577
+ left: 50%;
578
+
579
+ top: 14%;
580
+
581
+ transform: translate(-50%, 0);
582
+
583
+ }
584
+
585
+ @media only screen and (max-width: 767px) {
586
+
587
+ header#header .full .catch-copy {
588
+
589
+ left: 0;
590
+
591
+ transform: none;
592
+
593
+ width: 100%;
594
+
595
+ }
596
+
597
+ }
598
+
599
+ header#header .full .catch-copy ul {
600
+
601
+ display: flex;
602
+
603
+ justify-content: space-between;
604
+
605
+ align-items: flex-start;
606
+
607
+ max-width: 660px;
608
+
609
+ width: 100%;
610
+
611
+ }
612
+
613
+ @media only screen and (max-width: 767px) {
614
+
615
+ header#header .full .catch-copy ul {
616
+
617
+ justify-content: center;
618
+
619
+ flex-direction: column;
620
+
621
+ align-items: center;
622
+
623
+ }
624
+
625
+ }
626
+
627
+ header#header .full .catch-copy ul li {
628
+
629
+ width: 33.3%;
630
+
631
+ }
632
+
633
+ @media only screen and (max-width: 767px) {
634
+
635
+ header#header .full .catch-copy ul li {
636
+
637
+ width: 100%;
638
+
639
+ display: contents;
640
+
641
+ }
642
+
643
+ }
644
+
645
+ header#header .full .catch-copy ul li h2 {
646
+
647
+ color: #fff;
648
+
649
+ writing-mode: vertical-rl;
650
+
651
+ font-size: 4rem;
652
+
653
+ line-height: 2.5;
654
+
655
+ font-family: fot-tsukumin-pr6n, sans-serif;
656
+
657
+ letter-spacing: 0.1em;
658
+
659
+ }
660
+
661
+ @media only screen and (max-width: 767px) {
662
+
663
+ header#header .full .catch-copy ul li h2 {
664
+
665
+ writing-mode: unset;
666
+
667
+ font-size: 3rem;
668
+
669
+ text-align: center;
670
+
671
+ }
672
+
673
+ }
674
+
675
+ header#header .full .catch-copy ul li img {
676
+
677
+ padding-top: 80px;
678
+
679
+ }
680
+
681
+ @media only screen and (max-width: 767px) {
682
+
683
+ header#header .full .catch-copy ul li img {
684
+
685
+ width: 98px;
686
+
687
+ height: 101px;
688
+
689
+ padding: 0;
690
+
691
+ }
692
+
693
+ }
694
+
695
+ ```
696
+
697
+
698
+
411
699
  ```scss
412
700
 
413
701
  $media-types: (default: 'print, screen and (min-width: 961px)',
@@ -458,20 +746,12 @@
458
746
 
459
747
 
460
748
 
461
- // スマホのとき
462
-
463
-
464
-
465
749
  $('head').prepend('<meta name="viewport" content="width=device-width" />');
466
750
 
467
751
  } else {
468
752
 
469
753
 
470
754
 
471
- // PC・タブレットのとき
472
-
473
-
474
-
475
755
  $('head').prepend('<meta name="viewport" content="width=1376" />');
476
756
 
477
757
  }
@@ -482,6 +762,70 @@
482
762
 
483
763
 
484
764
 
765
+ ```javascript
766
+
767
+ /* 6-1-3.js */
768
+
769
+
770
+
771
+ var windowwidth =
772
+
773
+ window.innerWidth || document.documentElement.clientWidth || 0;
774
+
775
+ if (windowwidth > 768) {
776
+
777
+ var responsiveImage = [
778
+
779
+ { src: "./img/top_img01.jpg" },
780
+
781
+ { src: "./img/top_img02.jpg" },
782
+
783
+ { src: "./img/top_img03.jpg" },
784
+
785
+ ];
786
+
787
+ } else {
788
+
789
+ var responsiveImage = [
790
+
791
+ { src: "./img/img_sp_01.jpg" },
792
+
793
+ { src: "./img/img_sp_02.jpg" },
794
+
795
+ { src: "./img/img_sp_03.jpg" },
796
+
797
+ ];
798
+
799
+ }
800
+
801
+
802
+
803
+ //Vegas全体の設定
804
+
805
+
806
+
807
+ $("#slider").vegas({
808
+
809
+ overlay: true,
810
+
811
+ transition: "blur",
812
+
813
+ transitionDuration: 2000,
814
+
815
+ delay: 10000,
816
+
817
+ animationDuration: 20000,
818
+
819
+ animation: "kenburns",
820
+
821
+ slides: responsiveImage,
822
+
823
+ });
824
+
825
+ ```
826
+
827
+
828
+
485
829
  ### 試したこと
486
830
 
487
831
 
@@ -503,3 +847,9 @@
503
847
  ・横持ち縦持ち共に同様の現象が起きています。
504
848
 
505
849
  ・OSのバージョンはiPadOS 14.0.81です。
850
+
851
+
852
+
853
+ ・vendor.cssとsanitize.cssというリセットCSSを使用しています。
854
+
855
+ ・vegasという画像がズームするプログラムを使っています。そのプログラムのCSSは「6-1-3.css」、JavaScriptは「6-1-3.js 」となります。

2

書式の改善

2021/12/14 01:56

投稿

soraatori
soraatori

スコア55

test CHANGED
File without changes
test CHANGED
@@ -316,8 +316,6 @@
316
316
 
317
317
  align-items: flex-start;
318
318
 
319
- flex-wrap: wrap;
320
-
321
319
  max-width: 660px;
322
320
 
323
321
  width: 100%;
@@ -488,8 +486,6 @@
488
486
 
489
487
 
490
488
 
491
- Flexboxを設定している個所へ「flex-wrap: wrap;」を追加しました。
492
-
493
489
  子要素へ「width: 33.3%;」を追加しました。
494
490
 
495
491
 
@@ -499,3 +495,11 @@
499
495
 
500
496
 
501
497
  JavaScriptでタブレット以上はPCと同じように表示されるようにしています。
498
+
499
+ ・背景画像はh:1098px、w:1360pxです。ロゴ画像はh:203px、w:196pxです。
500
+
501
+ ・問題が起きているのはsafariのモバイル用モードです。
502
+
503
+ ・横持ち縦持ち共に同様の現象が起きています。
504
+
505
+ ・OSのバージョンはiPadOS 14.0.81です。

1

書式の改善

2021/12/09 09:17

投稿

soraatori
soraatori

スコア55

test CHANGED
File without changes
test CHANGED
@@ -132,8 +132,6 @@
132
132
 
133
133
  position: relative;
134
134
 
135
- /*height: 1099px;*/
136
-
137
135
  overflow: hidden;
138
136
 
139
137
 
@@ -412,6 +410,46 @@
412
410
 
413
411
 
414
412
 
413
+ ```scss
414
+
415
+ $media-types: (default: 'print, screen and (min-width: 961px)',
416
+
417
+ xxs: 'only screen and (max-width: 340px)',
418
+
419
+ xs: 'only screen and (max-width: 480px)',
420
+
421
+ sm: 'only screen and (max-width: 767px)',
422
+
423
+ sm-md: 'only screen and (max-width: 960px)',
424
+
425
+ md: 'only screen and (min-width: 768px) and (max-width: 960px)',
426
+
427
+ md-lg: 'only screen and (min-width: 768px)',
428
+
429
+ lg: 'print, screen and (min-width: 961px)',
430
+
431
+ xl: 'print, screen and (min-width: 1367px)',
432
+
433
+ retina: 'screen and (-webkit-min-device-pixel-ratio: 2)',
434
+
435
+ print: 'print',
436
+
437
+
438
+
439
+ sp: 'only screen and (max-width: 767px)',
440
+
441
+ pc: 'print, screen and (min-width: 768px)'
442
+
443
+ );
444
+
445
+
446
+
447
+ $medias: pc,
448
+
449
+ sp;
450
+
451
+ ```
452
+
415
453
  ```javascript
416
454
 
417
455
  $(function () {