兼容响应式布局[5]

2017年11月17日07:00:41 发表评论

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

一.风景欣赏响应式

头部和右侧和公司简介一样,左边做成和首页图片流体一样即可。

//html 部分直接移植 PC 端即可

//css 部分

.scenery figure {
    border: 1px solid #ddd;
    display: block;
    padding: 4px;
    border-radius: 4px;
    width: 32.6%;
    margin: 15px 5px 15px 0;
    text-align: left;
    float: left;
}

//媒体查询

@media (min-width: 480px) and (max-width: 767px) {
    .scenery figure {
        width: 48.8%;
    }
}
@media (max-width: 479px) {
    .scenery figure {
        width: 99%;
    }
}

二.机票订购响应式

机票订购和风景一样,PC 端移植过来即可。HTML 和 CSS 部分不需要变动。

//html 部分直接 PC 端移植,完全不需要动,代码忽略

//css 部分基本不需要改动,本身就是流体。

//媒体查询

@media (min-width: 768px) and (max-width: 991px) {
    .ticket .form input {
        width: 98%;
        height: 35px;
        margin: 0;
    }
    .ticket .left {
        width: 98%;
        display: block;
    }
    .ticket .right {
        width: 98%;
        display: block;
    }
    .ticket .button {
        width: 98%;
        display: block;
    }
    .ticket .form p {
        line-height: 2;
    }
    .ticket .submit {
        display: block;
        width: 30%;
        height: auto;
        line-height: 2;
        position: relative;
        top: 10px;
        margin: 0 auto;
    }
}
@media (min-width: 480px) and (max-width: 767px) {
    .ticket .form input {
        width: 98%;
        height: 35px;
        margin: 0;
    }
    .ticket .left {
        width: 98%;
        display: block;
    }
    .ticket .right {
        width: 98%;
        display: block;
    }
    .ticket .button {
        width: 98%;
        display: block;
    }
    .ticket .form p {
        line-height: 2;
    }
    .ticket .submit {
        display: block;
        width: 30%;
        height: auto;
        line-height: 2;
        position: relative;
        top: 10px;
        margin: 0 auto;
    }
    .ticket .type, .ticket .form, .ticket .new, .ticket .form input, .ticket .subm    it, .ticket .reserve {
        font-size: 16px;
    }
}
@media (max-width: 479px) {
    .ticket .form input {
        width: 98%;
        height: 35px;
        margin: 0;
    }
    .ticket .left {
        width: 98%;
        display: block;
    }
    .ticket .right {
        width: 98%;
        display: block;
    }
    .ticket .button {
        width: 98%;
        display: block;
    }
    .ticket .form p {
        line-height: 2;
    }
    .ticket .submit {
        display: block;
        width: 30%;
        height: auto;
        line-height: 2;
        position: relative;
        top: 10px;
        margin: 0 auto;
    }
    .ticket .reserve {
        display: inline-block;
        width: auto;
        height: auto;
        padding: 8px;
        line-height: 1;
    }
    .ticket .type, .ticket .form, .ticket .new, .ticket .form input, .ticket .subm    it, .ticket .reserve {
        font-size: 14px;
    }
}

注:本章为第62课。本次教程共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: