CSS3 미디어 쿼리를 사용한 반응형 디자인을 위한 HTML5 실습 코드 공유

이제 화면 해상도의 범위는 320px(iPhone)에서 2560px(대형 모니터) 이상입니다. 사용자는 더 이상 데스크톱 컴퓨터를 사용하여 웹사이트에 액세스하는 것이 아니라 휴대폰, 노트북, 태블릿도 사용합니다. 따라서 웹 사이트 너비를 고정된 값으로 설정하는 기존 방법은 더 이상 요구 사항을 충족할 수 없습니다. 웹 디자인은 이 새로운 요구 사항에 적응해야 합니다. 페이지 레이아웃은 액세스 장치의 다양한 해상도에 따라 자동으로 조정될 수 있어야 합니다. 이 튜토리얼에서는 html5 및 CSS3 미디어 쿼리를 사용하여 크로스 브라우저 반응형 디자인을 완성하는 방법을 소개합니다.

첫 실행

시작하기 전에 최종 데모를 통해 최종 효과를 확인할 수 있습니다. 브라우저 크기를 조정하면 창 크기에 따라 페이지 레이아웃이 자동으로 조정되는 것을 볼 수 있습니다.

더 많은 예시

아래 주소를 방문하면 더 많은 관련 예시를 볼 수 있습니다: WordPress 테마. 저는 Tisa, Elemin, Suco, iTheme2, Funki, Minblr 및 Wumblr와 같은 미디어 쿼리를 디자인했습니다.

개요

기본적으로 페이지 컨테이너의 너비는 980px이며, 이는 1024px보다 큰 해상도에 최적화되어 있습니다. 미디어 쿼리를 사용하여 뷰포트의 너비를 확인합니다. 980px 미만인 경우 좁은 화면 표시 모드로 변경되며 페이지 레이아웃은 고정 너비가 아닌 흐르는 너비를 사용합니다. 뷰포트가 650px 미만인 경우 모바일 디스플레이 모드로 변경되고, 콘텐츠, 사이드바 등이 별도의 열 레이아웃으로 변경되어 해당 너비가 화면 너비를 채웁니다.

HTML 코드

여기서, 아래 html 코드에서는 자세한 내용을 소개하지 않겠습니다. 아래는 레이아웃 페이지의 메인 프레임입니다. "header", "content", "sidebar" 및 "footer"를 래핑하는 "pagewrap" 컨테이너가 있습니다.

<p id="pagewrap">

    <header id="header">

        <hgroup>
            <h1 id="site-logo">Demo</h1>
            <h2 id="site-description">Site Description</h2>
        </hgroup>

        <nav>
            <ul id="main-nav">
                <li><a href="#">Home</a></li>
            </ul>
        </nav>

        <form id="searchform">
            <input type="search">
        </form>

    </header>
    
    <p id="content">

        <article class="post">
            blog post        </article>

    </p>
    
    <aside id="sidebar">

        <section class="widget">
             widget        </section>
                        
    </aside>

    <footer id="footer">
        footer    </footer>
    </p>

　HTML5.js

데모에서는 html5 태그를 사용했는데 IE 브라우저에서는 IE9 이전에는 지원하지 않습니다.< header>,