Mobile terminal project development summary

For this mobile page development, I came into contact with many new things. The first one is responsive layout. In mobile page development, it is necessary to take into account the different screen sizes of the mobile terminal and use different layouts to present it. Get the desired effect on mobile devices with small screens. It may be necessary to reduce the amount of information on the page and change the original layout scheme to a layout scheme suitable for mobile terminals. In mobile devices with medium screen sizes, such as tablets, you need to consider the layout plan for horizontal screen, vertical screen, etc. Derived from these needs is the so-called responsive layout solution. The focus of responsive layout is to use media queries to use different css styles for devices with different screen sizes. In this case, it can directly adapt to different Instead of writing different pages for different devices, you only need one HTML file and CSS file.

To use responsive layout, you first need to set "viewport" in the metadata tag at the head of the page, and set a series of parameters required for responsive layout in it. After the "viewport" is set, you can write media queries in css to use different layout schemes for devices with different screen sizes.

#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>

The above is the summary of mobile terminal project development. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!