'web standard/responsive web'에 해당되는 글 2건

  1. 2014.01.20 media query 정의방법 예제
  2. 2012.03.19 반응형웹의 시작
web standard/responsive web2014. 1. 20. 17:18

/* 스마트폰 가로+세로 */
@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) {
}


/* 갤럭시탭+iPad 가로+세로 */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

}


/* 갤럭시탭+iPad 가로 */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

}


/* 갤럭시탭+iPad 세로 */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

}


/* 데스크탑 브라우저 가로 */
@media only screen and (min-width : 1224px) {

}


/* 큰 모니터 */
@media only screen and (min-width : 1824px) {
}


/* iPhone4와 같은 높은 해상도 */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {

}

'web standard > responsive web' 카테고리의 다른 글

반응형웹의 시작  (0) 2012.03.19
Posted by 수라
web standard/responsive web2012. 3. 19. 15:13

http://remysharp.com/2009/01/07/html5-enabling-script/
ie8 이하에서 html5 tag인식을 위한 스크립트 추가
<!–[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>

새로 추가된 요소의 속성 정의를 위한 css reset
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {
    display: block
}

모바일에서 페이지뷰를 할때 적절히 확대를 하기 위한 viewport 예시 (font 등을 %나 em으로 정의해도 될듯)
<meta
  name="viewport"
  content="
    width=device-width,
    initial-scale=1,
    minimum-scale=1,
    maximum-scale=1,
    user-scalable=no"
/>

n-screen에 대응하기 위한 css3 media queries

@charset “utf-8″;
/* All Device */
모든 해상도를 위한 공통 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨.

/* Mobile Device */
768px 미만 해상도의 모바일 기기를 위한 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨. 미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않는다.

/* Tablet & Desktop Device */
@media all and (min-width:768px){
사용자 해상도가 768px 이상일 때 이 코드가 실행됨. 테블릿과 데스크톱의 공통 코드를 작성한다.
}

/* Tablet Device */
@media all and (min-width:768px) and (max-width:1024px){
사용자 해상도가 768px 이상이고 1024px 이하일 때 이 코드가 실행됨. 아이패드 또는 비교적 작은 해상도의 랩탑이나 데스크톱에 대응하는 코드를 작성한다.
}

/* Desktop Device */
@media all and (min-width:1025px){
사용자 해상도가 1025px 이상일 때 이 코드가 실행됨. 1025px 이상의 랩탑 또는 데스크톱에 대응하는 코드를 작성한다.
}

or

<link rel="stylesheet" type="text/css" href="layer.css" />
<link rel="stylesheet" media="screen and (min-width: 687px) and (max-width: 1000px)" type="text/css" href="mediaq_pad.css" />
<link rel="stylesheet" media="screen and (max-width: 686px)" type="text/css" href="mediaq_m.css" />


'web standard > responsive web' 카테고리의 다른 글

media query 정의방법 예제  (0) 2014.01.20
Posted by 수라