SCSS 筆記(4) - Media Query

發表於 | 分類於 | 閱讀次數:
| 258

ALEX線上直播課程(10/6)下半場

Media Query

注意權重

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
#container{
    width:100%;
    >.card{
        width: 25%;
    }
}
/*錯誤寫法*/
@media (max-width:980px){
    .card{
        width: 25%;
    }
}
/*正確寫法1*/
@media (max-width:980px){
    #container{
        >.card{
            width: 25%;
        }
    }
}
/*正確寫法2*/
#container{
    width:100%;
    >.card{
        width: 25%;
        @media (max-width:980px){
            width: 100%;
        }
    }
}

  • $wide:1800up(1920/3840)；寬螢幕以上
  • $desktop:1200；筆電
  • $tablet-lanscape:900-1200；橫平板
  • $talbet-potrait:600-900；直平板
  • %phone:600以下；手機

筆電常見:1366/1440

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$wide: '(min-width: 1800px)' !default;
$desktop: '(min-width: 1200px)' !default;
$tablet-landscape: '(min-width: 900px)' !default;
$tablet-protrait: '(min-width: 600px)' !default;
$phone: '(max-width: 600px)' !default;

@mixin media($query:$phone){
  @media #{$query}{
    @content 
    /*佔位置的符號,編譯後會把下面#container那坨塞進來*/
  }
}

@include media($wide){
  #container {
    >.card{
         width: 50%;
     }
  }
}

/*最後產出*/
@media (min-width: 1800px) {
  #container > .card {
    width: 50%;
  }
}

!default = 預設值，沒有設過就是用default

自訂snippet

file -> preference -> user -> snippet -> scss
快速產生snippet

0%