PC, 태블릿, 모바일용 CSS 미디어 쿼리(Media Query)
본문
/*
##Device = Desktops ##Screen = 1281px to higher resolution desktops ##Device = 데스크탑 ##Screen = 1281px 이상 해상도 데스크탑 */ @media (min-width: 1281px) { //CSS } /* ##Device = Laptops, Desktops ##Screen = B/w 1025px to 1280px ##Device = 랩탑, 데스크탑 ##Screen = 1025px에서 1280px 사이 */ @media (min-width: 1025px) and (max-width: 1280px) { //CSS } /* ##Device = Tablets, Ipads (landscape), ##Screen = B/w 768px to 1024px ##Device = 태블릿, 아이패드(세로), ##Screen = 768px에서 1024px 사이 */ @media (min-width: 768px) and (max-width: 1024px) { //CSS } /* ##Device = Tablets, Ipads (portrait) ##Screen = B/w 768px to 1024px ##Device = 태블릿, 아이패드(가로) ##Screen = 768px에서 1024px 사이 */ @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { //CSS } /* ##Device = Low Resolution Tablets, Mobiles (Landscape) ##Screen = B/w 481px to 767px ##Device = 저해상도 태블릿, 모바일(가로) ##Screen = 481px에서 767px 사이 */ @media (min-width: 481px) and (max-width: 767px) { //CSS } /* ##Device = Most of the Smartphones Mobiles (Portrait) ##Screen = B/w 320px to 479px ##Device = 대부분의 스마트폰 모바일 기기(세로) ##Screen = 320px에서 479px 사이 */ @media (min-width: 320px) and (max-width: 480px) { //CSS } // ##출처: gist.github.com/gokulkrishh/242e68d1ee94ad05f488
// 원문에서 landscape(가로), portrait(세로)이 잘못 기재된 부분을 수정했습니다.
댓글목록
등록된 댓글이 없습니다.