/* IPHONE 3 IMAGES
================================*/
@media all and (-webkit-min-device-pixel-ratio: 2){
/* my small background imgs here.... */
}
/* IPHONE 4 'retina' IMAGES
================================*/
@media all and (max-device-width: 480px){
/* my high-res background imgs here.... */
}
@media (max-width: 480px) {}
/*Tablet & Desktop Device*/
@media all and (min-width:768px) {
.
/*Tablet Device*/
@media all and (min-width:768px) and (max-width:1024px) {
/*Desktop Device*/
@media all and (min-width:1025px) {
@media all and (min-width:768px) and (max-width:1024px) { ... }
// 뷰포트 너비가 768px 이상 '그리고' 1024px 이하면 실행
@media all and (width:768px), (width:1024px) { ...}
// 뷰포트 너비가 768px 이거나 '또는' 1024px 이면 실행
@media not all and (min-width:768px) and (max-width:1024px) { ... }
// 뷰포트 너비가 768px 이상 '그리고' 1024px 이하가 '아니면' 실행
'Front > HTML&CSS' 카테고리의 다른 글
| [IE] table 요소에 position과 background 사용 주의 (0) | 2016.10.26 |
|---|---|
| <iframe>으로 올린 유투브 동영상 z-index 문제 (0) | 2016.10.19 |
| <!doctype> (0) | 2016.05.03 |
| 말 줄임 (0) | 2016.05.02 |
| 가로세로 비율을 유지하는 반응형 박스 (0) | 2016.04.26 |