[03]项目实战-移动端流体布局

一．搜索部分

搜索部分包含三个内容，背景区块、文本框和按钮。

//HTML 部分
<div id="search">
    <input type="text" class="search" placeholder="请输入旅游景点或城市">
    <button class="button">搜索</button>
</div>

//CSS 部分
#search {
    max-width: 6.4rem;
    height: .33rem;
    background-color: #ddd;
    margin: 0 auto;
    position: relative;
    padding: .03rem 0 0 0;
}
#search .search {
    display: block;
    outline: none;
    width: 95%;
    font-size: .14rem;
    border-radius: .04rem;
    background-color: #fff;
    border: none;
    height: .27rem;
    padding: 0 .05rem;
    margin: 0 auto;
}
#search .button {
    display: block;
    background-color: #eee;
    outline: none;
    cursor: pointer;
    color: #666;
    width: .5rem;
    height: .27rem;
    border: none;
    border-top-right-radius: .04rem;
    border-bottom-right-radius: .04rem;
    position: absolute;
    font-size: .12rem;
    top: .03rem;
    right: 1%;
}
//布局忽略边框计算
div {
    box-sizing: border-box;
}

二．旅游部分

这里，我们首先设计一个标题，具体图片部分放到后面一节。

//HTML 部分
<div id="tour">
    <hgroup>
        <h2>热门旅游</h2>
        <h3>最新的各种热门旅游资讯的推荐！</h3>
    </hgroup>
</div>

//CSS 部分
#tour {
    max-width: 6.4rem;
    margin: .1rem auto 0 auto;
}
#tour h2 {
    text-align: center;
    color: #666;
    font-size: .26rem;
}
#tour h3 {
    text-align: center;
    font-weight:normal;
    color: #666;
    margin: 0.05rem 0 0.1rem 0;
    font-size: .16rem;
}

三．媒体查询

媒体查询，这里我们不去详细去讲，这个放到后面响应式章节讲，这里简单使用即可。

/*媒体查询，大于 480 小于 640*/
@media (min-width: 480px)and (max-width: 640px) {
    #tour h2 {
        font-size: .26rem;
    }
    #tour h3 {
        font-size: .16rem;
    }
    #footer {
        font-size: .14rem;
    }
}
/*媒体查询，小于 480*/
@media (max-width: 480px){
    #tour h2 {
        font-size: .18rem;
    }
    #tour h3 {
        font-size: .14rem;
    }
    #footer {
        font-size: .12rem;
    }
}