iOS转前端之仿写宠物网（适配不同尺寸）

本文链接：https://blog.csdn.net/hmh007/article/details/76177472

前一篇说到了适配问题，这篇就来写个Demo用一用。

代码我会放到我的github，记得去看看哦~

都是一些之前常用知识的，这里就不详细解释了。直接上代码：

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宠物网</title>
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
    <!--头部-->
    <div id="header"></div>
    <!--导航-->
    <div id="nav">
        <ul>
            <li><a href="#" class="selected">HOME</a></li>
            <li><a href="#">ABOUT US</a></li>
            <li><a href="#">SERVICES</a></li>
            <li><a href="#">GALLERY</a></li>
            <li><a href="#">CONTACT</a></li>
        </ul>
    </div>
    <!--主要内容-->
    <div id="list">
        <div class="animal">
            <img src="images/pic.jpg">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
            <a href="#">READ MORE</a>
        </div>
        <div class="animal">
            <img src="images/pic1.jpg">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
            <a href="#">READ MORE</a>
        </div>
        <div class="animal">
            <img src="images/pic2.jpg">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
            <a href="#">READ MORE</a>
        </div>
        <div class="animal">
            <img src="images/pic2.jpg">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
            <a href="#">READ MORE</a>
        </div>
        <div class="animal">
            <img src="images/pic1.jpg">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
            <a href="#">READ MORE</a>
        </div>
        <div class="animal">
            <img src="images/pic.jpg">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
            <a href="#">READ MORE</a>
        </div>
        <div class="animal">
            <img src="images/pic2.jpg">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
            <a href="#">READ MORE</a>
        </div>
        <div class="animal">
            <img src="images/pic1.jpg">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
            <a href="#">READ MORE</a>
        </div>
        <div class="animal">
            <img src="images/pic2.jpg">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
            <a href="#">READ MORE</a>
        </div>
        <div class="animal">
            <img src="images/pic.jpg">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
            <a href="#">READ MORE</a>
        </div>
        <div class="animal">
            <img src="images/pic1.jpg">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
            <a href="#">READ MORE</a>
        </div>
        <div class="animal">
            <img src="images/pic2.jpg">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
            <a href="#">READ MORE</a>
        </div>
    </div>
    <!--尾部-->
    <div id="footer">
        <h2>CONTACT US</h2>
        <ul>
            <li><a href="#"><img src="images/fb.png"></a></li>
            <li><a href="#"><img src="images/g+.png"></a></li>
            <li><a href="#"><img src="images/tw.png"></a></li>
            <li><a href="#"><img src="images/rss.png"></a></li>
        </ul>
    </div>
</body>
</html>

下面来看css的部分：

/*导入字体*/
@font-face {
    font-family: BebasNeue-webfont;
    src: url("../fonts/BebasNeue-webfont.ttf");
}

a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{
    padding: 0;
    margin: 0;
}

body {
    background: url(../images/pattern.gif);
    font-family: BebasNeue-webfont
}

a {
    text-decoration: none;
}

#header {
    background-color: red;
    height: 3px;
}


/*导航*/
#nav {
    /*background-color: white;*/
    text-align: center;
    margin-bottom: 100px;
}

/*#nav ul li {*/
    /*float: left;*/
/*}*/

#nav ul {
    display: inline-block;
}

#nav ul li {
    display: inline-block;
}

#nav ul li a {
     margin: 0 10px;
     display: inline-block;
     width: 200px;
     height: 60px;
     color: white;
     line-height: 50px;
     font-size: 28px;
}

#nav ul li a.selected {
    background-color: white;
    color: black;
}

#nav ul li a:hover {
    background-color: white;
    color: black;
}

/*中间列表*/
#list{
    text-align: center;
    background-color: white;
}

#list .animal {
    width: 382px;
    display: inline-block;
    text-align: left;
    padding: 20px;
}

#list .animal p {
    font-family: 'sans-serif';
    text-indent: 40px;
    margin: 5px 5px;
}

#list .animal a {
    background-color: #C0392B;
    color: white;
    display: inline-block;
    height: 36px;
    width: 120px;
    font-size: 25px;
    line-height: 36px;
    text-align: center;
}

#list .animal a:hover {
    background-color: black;
}


/*尾部*/
#footer {
    margin: 20px 0;
    text-align: center;
}

#footer h2 {
    color: white;
    margin: 5px 0;
}

#footer ul {
    display: inline-block;
}

#footer ul li {
    display: inline-block;
}

#footer ul li a {
    margin: 0 3px;
}

#footer ul li a:hover {
    opacity: 0.8;
}


/*适配*/
@media screen and (max-width: 1154px) {
    #nav ul li a {
        width: 150px;
        font-size: 28px;
    }
}

@media screen and (max-width: 897px) {
    #nav ul li a {
        width: 130px;
        font-size: 25px;
    }
}

@media screen and (max-width: 746px) {
    #nav ul li a {
        width: 80px;
        font-size: 20px;
    }

    #nav {
        margin-bottom: 60px;
    }
}

@media screen and (max-width: 629px) {
    #nav ul li a {
        width: 65px;
        font-size: 20px;
        height: 40px;
        line-height: 40px;
    }

    #nav {
        margin-bottom: 30px;
    }

    #list .animal {
        width: 362px;
        padding: 20px;
    }

    #list .animal img {
        width: 355px;
    }
}

最后的这个'@media'就是针对不同屏幕的适配，‘max-width’代表最大的宽度。

ok，下面来看看运行的效果图：