[2]项目实战- 兼容响应式布局

一．搜索响应式

在 PC 端，将搜索的文本框和按钮至于大背景前，移动端直接放在了大图片的下方。在响应式这里，还是遵循 PC 端，只不过采用流体缩放外加响应式控制来兼容显示。

//PC 端移植，并稍作修改
<div id="adver">
    <img src="img/adver.jpg" alt="">
    <div class="center"></div>
        <div class="center copy">
        <input type="text" class="search" placeholder="请输入旅游景点或
        城市">
        <button class="button">搜索</button>
    </div>
</div>

//CSS 部分，基本是 PC 端移植，并改为流体百分比
#adver {
    max-width: 1920px;
    margin: 0 auto;
    padding: 70px 0 0 0;
    position: relative;
}
#adver .center {
    width: 40%;
    height: 60px;
    background-color: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -20%;
    opacity: 0.6;
    border-radius: 10px;
}
#adver .copy{
    opacity: 1;
    background-color: transparent;
    padding: 3px3px 0 3px;
}
#adver .search {
    width: 70%;
    height: 52px;
    background-color: #eee;
    color: #666;
    border: 1px solid #666;
    border-radius: 10px;
    font-size: 24px;
    padding: 0 10px;
    outline: none;
    display: block;
    float: left;
}
#adver .button {
    width: 30%;
    height: 54px;
    background-color: #eee;
    color: #666;
    border: 1px solid #333;
    border-left-width: 3px;
    border-radius: 10px;
    font-size: 24px;
    outline: none;
    cursor: pointer;
    font-weight:bold;
    display: block;
    float: right;
}
//媒体查询部分
/*在 992 和 1199 像素之间的屏幕里,这里的样式才生效*/
@media (min-width: 992px)and (max-width: 1199px) {
    #adver .center {
        width: 50%;
        margin: -10px 0 0 -25%;
    }
}
/*在 768 和 991 像素之间的屏幕里,这里的样式才生效*/
@media (min-width: 768px)and (max-width: 991px) {
    #adver .center {
        width: 60%;
        margin: -10px 0 0 -30%;
    }
}
/*在 480 和 767 像素之间的屏幕里,这里的样式才生效*/
@media (min-width: 480px)and (max-width: 767px) {
    #header, #header .center,#header .logo, #header .link {
        height: 45px;
    }
    #header .link {
        line-height:45px;
    }
    #header .logo, .sm-hidden{
        display: none;
    }
    #header .link {
        width: 100%;
    }
    #adver {
        padding: 45px 0 0 0;
    }
    #adver .center {
        width: 70%;
        margin: -10px 0 0 -35%;
    }
    #adver .search {
        height: 45px;
        font-size: 18px;
    }
    #adver .button {
        height: 45px;
        font-size: 18px;
    }
    #adver .center {
        height: 53px;
    }
    .sm-visible {
        display: block;
    }
    #footer .bottom {
        height: 40px;
        line-height:40px;
    }
}
/*在小于 480 像素的屏幕,这里的样式才生效*/
@media (max-width: 479px){
    #header, #header .center,#header .logo, #header .link {
        height: 45px;
    }
    #header .link {
        line-height:45px;
    }
    #header .logo, .xs-hidden, .sm-hidden {
        display: none;
    }
    #header .link {
        width: 100%;
    }
    #header .link li {
        width: 25%;
    }
    #adver {
        padding: 45px 0 0 0;
    }
    #adver .center {
        width: 80%;
        margin: -10px 0 0 -40%;
    }
    #adver .search {
        height: 40px;
        font-size: 16px;
    }
    #adver .button {
        height: 40px;
        font-size: 16px;
    }
    #adver .center {
        height: 48px;
    }
    .sm-visible {
        display: block;
    }
    #footer .bottom {
        height: 40px;
        line-height:40px;
        font-size: 13px;
    }
}

二．底部响应式

底部的响应式很好理解，就是大屏幕采用 PC 端，小屏幕采用移动端，进行响应式隐藏即可。

//PC 端复制过来，进行部分修改
<footer id="footer">
    <div class="top sm-hidden">
        <div class="block left">
            <h2>合作伙伴</h2>
            <hr>
            <ul>
                <li>途牛旅游网</li>
                <li>驴妈妈旅游网</li>
                <li>携程旅游</li>
                <li>中国青年旅行社</li>
            </ul>
        </div>
        <div class="block center">
            <h2>旅游 FAQ</h2>
            <hr>
            <ul>
                <li>旅游合同签订方式？</li>
                <li>儿童价是基于什么制定的？</li>
                <li>旅游的线路品质怎么界定的？</li>
                <li>单房差是什么？</li>
                <li>旅游保险有那些种类？</li>
            </ul>
        </div>
        <div class="block right">
            <h2>联系方式</h2>
            <hr>
            <ul>
                <li>微博：weibo.com/ycku</li>
                <li>邮件：ycku@ycku.com</li>
                <li>地址：江苏盐城无名路 123 号</li>
            </ul>
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="version sm-visible">
    客户端 | 触屏版 | 电脑版
    </div>
    <div class="bottom">
    Copyright © YCKU 瓢城旅行社 | 苏 ICP 备 120110119 号 <span
    class="sm-hidden">| 旅行社经营许可证：L-YC-BK12345</span>
    </div>
</footer>