모바일 단말기 프로젝트 개발 개요-HTML 튜토리얼-php.cn

모바일 단말기 프로젝트 개발 개요

PHP中文网

풀어 주다： 2016-08-30 09:21:10

원래의

1238명이 탐색했습니다.

이번 모바일 페이지 개발을 하면서 저는 많은 새로운 것들을 접하게 되었습니다. 첫 번째는 반응형 레이아웃입니다. 모바일 페이지 개발에서는 모바일 단말기의 다양한 화면 크기를 고려하고 다양한 레이아웃을 사용해야 합니다. 작은 화면의 모바일 장치에서 원하는 효과를 얻을 수 있습니다. 페이지에 표시되는 정보의 양을 줄이고 원래의 레이아웃 방식을 모바일 단말에 적합한 레이아웃 방식으로 변경해야 할 수도 있습니다. 태블릿과 같은 중간 화면 크기의 모바일 기기에서는 가로 화면, 세로 화면 등의 레이아웃 계획을 고려해야 합니다. 이러한 요구에서 파생된 것이 소위 반응형 레이아웃 솔루션입니다. 반응형 레이아웃의 초점은 미디어 쿼리를 통해 화면 크기가 다른 장치에 대해 서로 다른 CSS 스타일을 사용할 수 있다는 것입니다. 다양한 장치에 대한 페이지를 보려면 HTML 파일과 CSS 파일 하나만 있으면 됩니다.

반응형 레이아웃을 사용하려면 먼저 페이지 헤드의 메타데이터 태그에 "viewport"를 설정하고 반응형 레이아웃에 필요한 일련의 매개변수를 설정해야 합니다. "뷰포트"가 설정된 후 CSS에 미디어 쿼리를 작성하여 화면 크기가 다른 장치에 대해 다른 레이아웃 구성표를 사용할 수 있습니다.

#nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 136px;
    background: #fff;
}
#nav a{
    width: 25%;
    height: 135px;
    position: relative;
}
#nav a span{
    display: block;
    margin: 15px 0 0 47px;
}
#nav a p{
    margin-left: 55px;
    font-size: 26px;
    color:#000;
    position: absolute;
    bottom: 15px;
}

로그인 후 복사

<nav id="nav" class="test">
            <a href="index.html" class="fl">
                <span class="img icon-6"></span>
                <p>首页</p>
            </a>
            <a href="category.html" class="fl">
                <span class="img icon-7"></span>
                <p>分类</p>
            </a>
            <a href="search.html" class="fl">
                <span class="img icon-8"></span>
                <p>发现</p>
            </a>
            <a href="personal-information.html" class="fl">
                <span class="img icon-9"></span>
                <p>我的</p>
            </a>
        </nav>

로그인 후 복사

위 내용은 모바일 단말 프로젝트 개발 개요입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(m.sbmmt.com)를 참고해주세요!