兼容响应式布局[2]

2017年11月5日07:00:27 发表评论

本章主要开始如果将前两个项目再进行重构,设计成既可以在 PC 端正常显示,又可以在 PAD 上浏览,还可以在移动端有良好的体验。这些都必须兼容,那只有使用响应式设计了。

一.搜索响应式

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

//PC 端移植,并稍作修改

<div id="adver">
    <img src="img/adver.jpg" alt="兼容响应式布局[2]" 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: 3px 3px 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>

注:本章为第59课。本次教程共63节课(由大庆seo工程师整理发布),循序渐进地教您响应式网站的制作。58-63课时为响应式网站制作实例。最贴心的是每节课示例代码提供免费下载。小白从第一节课开始学起,将走向前端开发,特别是目前最为流行的响应式网站高手之路......

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信公众号扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: