media

讓不同寬度尺寸套用不同CSS

範例

.container
.container
  .block.a AAAA
  .block.b BBB
  .block.c CC
  .block.d DD
  .block.e EE
  .block.f FF
  .block.g GGGG
.container
 font-size: 0
 box-sizing: border-box

.block
 height: 200px
 text-align: center
 box-sizing: border-box
 border: 3px solid #fff
 font-size: 40px
 display: inline-block
 padding-top: 50px

.a
 width: 100%
 background-color: #00796B

.b
 width: 70%
 background-color: #B2DFDB
.c
 width: 30%
 background-color: #FFFFFF

.d
 width: 30%
 background-color: #00BCD4

.e
 width: 35%
 background-color: #BDBDBD

.f
width: 35%
background-color: #757575

.g
 width: 100%
 background-color: #009688

//以螢幕為條件,寬度800以下時套用這組css
@media screen and (max-width: 800px)
 .b
   width: 100%
 .c,.d,.e,.f
   width: 50%

//以螢幕為條件,寬度400以下時套用這組css
@media screen and (max-width: 400px)
 .b,.c,.e,.d,.f
   width: 100%

Display

PC:1200px

AAAA
BBB
CC
DD
EE
FF
GGGG

TABLET:800px

AAAA
BBB
CC
DD
EE
FF
GGGG

SMARTPHONE:400px

AAAA
BBB
CC
DD
EE
FF
GGGG

Leave a Reply

Your email address will not be published. Required fields are marked *