兼容响应式布局[3]

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

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

一.标题响应式

在首页的热门旅游这个主要区域, 有一个大标题和小标题。 通过响应式来设置他们在不同分辨率显示的字体大小。

//PC 端移植

<div id="tour">
    <section class="center">
        <h2>热门旅游</h2>
        <p>国内旅游、国外旅游、自助旅游、自驾旅游、油轮签证、主题旅游等各种最新热门旅游推荐</p>
    </section>
</div>
//css
#tour .center h2 {
    margin: 10px 0;
    font-size: 45px;
    letter-spacing: 2px;
    color: #666;
}
#tour .center p {
    color: #666;
    margin: 10px;
}

//媒体查询部分

/*在 992 和 1199 像素之间的屏幕里,这里的样式才生效*/

@media (min-width: 992px) and (max-width: 1199px) {
    #tour .center h2 {
        font-size: 40px;
    }
}

/*在 768 和 991 像素之间的屏幕里,这里的样式才生效*/

@media (min-width: 768px) and (max-width: 991px) {
    #tour .center h2 {
        font-size: 35px;
    }
}

/*在 480 和 767 像素之间的屏幕里,这里的样式才生效*/

@media (min-width: 480px) and (max-width: 767px) {
    #tour .center h2 {
        font-size: 30px;
    }
}

/*在小于 480 像素的屏幕,这里的样式才生效*/

@media (max-width: 479px) {
    #tour .center h2 {
        font-size: 26px;
    }
}

二.图片响应式

在 PC 端,我们固定一行显示了三组旅游图片介绍。那么在响应式环节,我们可以设置每个图片介绍为 1/3 即可。而不同的分辨率可以是 1/2 或 1/1。

//PC 端复制,部分修改

<figure>
<img src="img/tour1.jpg" alt="兼容响应式布局[3]" alt="热门旅游">
<figcaption>
<div class="tour_title">
<strong class="title">&lt;曼谷-芭提雅 6 日游&gt;</strong> 包团特惠,超丰富景点,升级 1 晚国五,无自费,更赠送 600 元/成人自费券
</div>
<div class="info">
<em class="sat">满意度 77%</em>
<span class="price">¥ <strong>2864</strong> 起</span>
</div>
<div class="type">国内长线</div>
</figcaption>
</figure>

//css

#tour {
    max-width: 1263px;
    margin: 30px auto;
    text-align: center;
}
#tour .center {
    text-align: center;
}
#tour figure {
    border: 1px solid #ddd;
    display: block;
    padding: 4px;
    border-radius: 4px;
    width: 32.4%;
    margin: 15px 0.4%;
    text-align: left;
    position: relative;
    float: left;
}
#tour figure img {
    vertical-align: middle;
}
#tour figure figcaption {
    color: #777;
    font-size: 14px;
    padding: 7px 0 0 0;
    letter-spacing: 1px;
    line-height: 1.5;
}
#tour .tour_title {
    height: 40px;
    overflow: hidden;
}
#tour .title {
    color: #333;
    font-weight: normal;
}
#tour .info {
    padding: 5px 0 0 0;
}
#tour .price {
    color: #f60;
    font-size: 14px;
}
#tour .price strong {
    font-size: 20px;
    letter-spacing: 1px;
}
#tour .sat {
    color: #999;
    font-size: 13px;
    font-style: normal;
    float: right;
    position: relative;
    right: 5px;
    top: 5px;
}
#tour .type {
    width: 90px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    border-bottom-right-radius: 4px;
    background-color: #59b200;
    font-size: 14px;
    color: #fff;
    letter-spacing: 1px;
    position: absolute;
    top: 4px;
    left: 4px;
}

//媒体查询部分

/*在 480 和 767 像素之间的屏幕里,这里的样式才生效*/

@media (min-width: 480px) and (max-width: 767px) {
    #tour figure {
        width: 49.2%;
    }
}

/*在小于 480 像素的屏幕,这里的样式才生效*/

@media (max-width: 479px) {
    #tour figure {
        width: 99%;
    }
}

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