兼容响应式布局[6]

2017年11月18日07:00:28 发表评论

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

一.旅游资讯响应式

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

//css 部分

.tour {
    position: relative;
    border: 1px solid #eee;
    margin: 0 0 20px 0;
    background-color: #fff;
    overflow: hidden;
}
.tour:after{
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
}
.tour img {
    width: 45%;
    float: left;
}
.tour figcaption {
    width: 55%;
    float: left;
}

//媒体查询

@media (min-width: 768px) and (max-width: 991px) {
    .tour .buy {
        position: absolute;
        top: auto;
        right: auto;
        bottom: 0;
        padding: 0 0 0 20px;
    }
    .tour h2 {
        font-size: 22px;
    }
}
@media (min-width: 480px) and (max-width: 767px) {
    .tour .buy {
        position: absolute;
        top: auto;
        right: auto;
        bottom: 0;
        padding: 0 0 0 20px;
    }
    .tour h2 {
        font-size: 22px;
        padding: 2px 0 2px 25px;
    }
    .tour h3 {
        font-size: 16px;
        padding: 2px 0 2px 25px;
    }
    .tour strong {
        font-size: 22px;
    }
}
@media (max-width: 479px) {
    .tour .buy {
        position: absolute;
        top: auto;
        right: auto;
        bottom: 0;
        padding: 0 0 0 10px;
    }
    .tour h2 {
        font-size: 18px;
        padding: 0 0 0 10px;
    }
    .tour strong {
        font-size: 18px;
    }
}

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