ios 미디어 쿼리 분기점 /* 스마트폰 (가로 및 세로) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* 사용자 코드 */ } /* 스마트폰 (가로 ) ----------- */ @media only screen and (min-width : 321px) { /* 사용자 코드 */ } /* 스마트폰 (세로) ----------- */ @media only screen and (max-width : 320px) { /* 사용자 코드 */ } /* 아이패드 (가로 및 세로) ----------- */ @media only screen and (min-device-width : 768px) and (ma.. WEB/CSS 8년 전
개인적인 미디어쿼리 틀 @media all and (max-width:767px) {/* 브라우저 가로폭이 767px이하일때 적용될 css (스마트폰) */} @media all and (min-width:768px) and (max-width:1023px) {/* 브라우저 가로폭이 768~1023px일때 적용될 css (태블릿) */} @media all and (min-width:1024px) {/* 브라우저 가로폭이 1024px이상일때 적용될 css (PC) */} WEB/Mobile 9년 전
기초-미디어 쿼리 미디어 쿼리"반응형 디자인"은 사이트가 표시되는 브라우저와 디바이스에 "반응하는" 사이트를 만드는 전략입니다.미디어 쿼리는 이렇게 하는 가장 강력한 도구입니다. 아래의 퍼센트 너비를 사용하는 레이아웃을 가지고 메뉴를 사이드바에 놓기에는 브라우저 창의 크기가 너무 작을 때 메뉴가 한 칼럼에 표시되도록 만들어 봅시다.@media screen and (min-width:600px) { nav { float: left; width: 25%; } section { margin-left: 25%; } } @media screen and (max-width:599px) { nav li { display: inline; } }HomeTaco MenuDraft ListHoursDirectionsContact이제 브라우저.. WEB/Mobile 9년 전
[미디어쿼리 크로스브라우징] respond.js Respond.js 소개IE 6~8 버전에서 미디어쿼리를 해석할 수 있도록 만들어주는 자바스크립트 라이브러리이다. 어떤 용도로 사용해도 제한이 없는 MIT 또는 BSD 라이선스를 가지고 있기 때문에 소스 코드에 포함된 라이선스 명시 조항만 지우지 않으면 github에서 언제든 내려받아 사용할 수 있다. REPO https://github.com/scottjehl/Respond/DEMO 데모보기Respond.js 사용법IE8 이하 버전에서만 사용하도록 조건부 주석문을 사용한다. 시작과 동시에 로딩이 되도록 에 위치시키고 respond.js는 웹서버 환경에서 테스트 해야 작동한다.아래는 CDN을 사용했으나 직접 다운로드 받은 파일을 링크해도 된다.HTML CDN/X-Domain SetupRespond.js는.. WEB/Mobile 9년 전
