@media 미디어 유형 and (조건)
/* top-down 방식*/
body {
background: url("images/bg0.jpg") no-repeat fixed;
background-size: cover;
}
@media screen and (max-width:1024px) {
/*화면 너비가 1024px이 되면*/
body {
background: url("images/bg1.jpg") no-repeat fixed;
background-size: cover;
}
}
@media screen and (max-width:760px) {
/*화면 너비가 760px이 되면*/
body {
background: url("images/bg1.jpg") no-repeat fixed;
background-size: cover;
}
}
@media screen and (max-width: 600px) {
/*화면 너비가 600px이 되면*/
body {
background: url("images/bg2.jpg") no-repeat fixed;
background-size: cover;
}
}
/* bottom-up 방식 */
body {
background: url("images/bg3.jpg") no-repeat fixed;
background-size: cover;
}
@media screen and (min-width:600px) {
/*화면 사이즈가 600px를 벗어나면*/
body {
background: url("images/bg2.jpg") no-repeat fixed;
background-size: cover;
}
}
@media screen and (min-width:760px) {
/*화면 사이즈가 760px를 벗어나면*/
body {
background: url("images/bg1.jpg") no-repeat fixed;
background-size: cover;
}
}
@media screen and (min-width: 1024px) {
/*화면 사이즈가 1024px를 벗어나면*/
body {
background: url("images/bg0.jpg") no-repeat fixed;
background-size: cover;
}
}
mediaQuery.scss
$phone: "only screen and (max-width: 768px)";
$desktop: "screen and (min-width: 769px)";
box.scss
@import './mediaQuery.scss';
@media #{$phone} {
.bigBox {
display: none;
}
}
@media #{$desktop} {
.bigBox {
display: block;
}
}