코딩
레이아웃 : media query
Skema Shark
2017. 2. 22. 20:19
반응형
레이아웃 : media query (생활코딩)
(위는 화면의 크기가 500px일 때, 배경 색이 빨간색을 뜻함. 그러나 실효성이 없음.)
반응형 디자인의 심장의 역할을 하는 미디어 커리.
<style>
@media (min, max-width:500px){
body{
}
}
</style>
min-width : 500px 이상 최소 ~~이상
max-width : 500px 이하. 최대 ~~ 이하
우선순위의 문제.
(캐스케이딩 등 다른 조건이 같다면)
나중에 나오는 코드가 우선순위가 높다.
ex : @media(max-width :500px){
body{background : color : red;}
}
@media(max-width :600px){
body{background : color : red;}
}
즉, 600이하로 나온다.
모바일에서도 601 이상은 빨강, 600이하는 파랑 등 이런식으로 효과가 적용됨.
이게 없으면 적용이 안됨.
글씨라던지 등등
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
미디어 쿼리와 관련된 도구와 옵션 설명.
반응형