수라의 티스토리

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" />