CSS設定響應式(RWD)有幾種方法

1
2
3
4

@media screen and (min-width: 400px) and (max-width: 700px) {
  .header {
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

.div{
         //desktop
         @media all and (min-width: 960px) {
                padding:20px;
          }
         //pad
         @media all and (min-width: 760px) and (max-width: 959px) {
              padding:10px;
         }
         //mini pad
         @media all and (min-width: 480px) and (max-width: 759px) {
               padding:5px;
         }
         //mobile
         @media all and (max-width: 480px) {
               padding:0px;
         }
      }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

.header {
  padding: 20px;
}
//pad
@media (max-width: 959px) {
  .header {
    padding: 10px;
  }
}
//mini pad
@media (max-width: 759px) {
  .header {
    padding: 5px;
  }
}
//mobile
@media (max-width: 480px) {
  .header {
    padding: 0px;
  }
}

 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
31
32
33
34
35
36
37
38

// device
$mobile: 568px;
$pad: 768px;
$desktop: 960px;

// color
$red: #ff0000;
$black: #000;

@mixin mobile {
    @media (max-width: $mobile) {
        @content;
    }
}

@mixin pad {
    @media (max-width: $pad) {
        @content;
    }
}

@mixin desktop {
    @media (max-width: $desktop) {
        @content;
    }
}



.header{
    color: $black;
    @include pad{
        color: $red;
    }
    @include mobile{
        display: none;
    }
}