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

2017年11月16日07:00:42 发表评论

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

一.栏目头部响应式

在栏目中,头部我们重新设计了图片,并且加上了黑色的层来取代兼容性不好的 CSS3渐变,高度适当的调整,以满足移动端的用户体验。

//html

<div id="headline">
    <img src="img/headline.jpg" alt="项目实战-兼容响应式布局[4]" alt="">
    <hgroup>
        <h2>公司简介</h2>
        <h3>公司的发展历程、获得荣誉以及联系方式</h3>
    </hgroup>
</div>

//css 部分,其他 PC 端移植

#headline {
    max-width: 1920px;
    margin: 0 auto;
    padding: 70px 0 0 0;
    position: relative;
}
#headline hgroup {
    position: absolute;
    top: 45%;
    left: 18%;
}

//媒体查询

@media (min-width: 992px) and (max-width: 1199px) {
    #headline h2 {
        font-size: 38px;
    }
    #headline h3 {
        font-size: 20px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    #headline h2 {
        font-size: 30px;
    }
    #headline h3 {
        font-size: 16px;
    }
}
@media (min-width: 480px) and (max-width: 767px) {
    #headline {
        padding: 45px 0 0 0;
    }
    #headline h2 {
        font-size: 26px;
    }
    #headline h3 {
        font-size: 14px;
    }
}
@media (max-width: 479px) {
    #headline {
        padding: 45px 0 0 0;
    }
    #headline h2 {
        font-size: 20px;
    }
    #headline h3 {
        font-size: 12px;
    }
}

二.公司简介响应式

公司简介,我们直接 PC 端完全复制过来即可。改成流体响应式,并且在响应式时,根据分辨率隐藏掉侧栏即可。

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

//css 大部分不动,只改几个流体百分比

#container {
    max-width: 1263px;
    margin: 30px auto;
}
#container .sidebar {
    width: 28%;
    float: right;
}
.list {
    width: 71%;
    float: left;
}
//媒体查询
@media (min-width: 992px) and (max-width: 1199px) {
    .sidebar {
        display: none;
    }
    .list {
        width: 100%;
        padding: 0 20px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .sidebar {
        display: none;
    }
    .list {
        width: 100%;
        padding: 0 20px;
    }
    .list h2 {
        font-size: 28px;
    }
    .about p {
        font-size: 18px;
    }
    .about address {
        font-size: 18px;
    }
}
@media (min-width: 480px) and (max-width: 767px) {
    .list {
        width: 100%;
        padding: 0 20px;
    }
    .list h2 {
        font-size: 25px;
    }
    .about p {
        font-size: 15px;
    }
    .about address {
        font-size: 15px;
    }
}
@media (max-width: 479px) {
    .list {
        width: 100%;
        padding: 0 20px;
    }
    .list h2 {
        font-size: 22px;
    }
    .about p {
        font-size: 14px;
    }
        .about address {
        font-size: 14px;
    }
}

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