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

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

一．基础 CSS

在 PC 端项目中，有很多常用的固定 CSS，在移动端同样适用，我们直接复制过来即可。

//通用 CSS
body,h1,h2,h3,p,ul,ol,form,fieldset,figure {
    margin: 0;
    padding: 0;
}
body {
    background-color: #f5f5f5;
    font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei
    UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;
}
ul,ol {
    list-style: outside none none;
}
a {
    text-decoration: none;
}
.none {
    display: none;
}

二．头部设计

头部设计用的是全屏流体 100%，高度为 45px，分为四栏，每栏两个中文字，再多就容易溢出。

//HTML 部分
<header id="header">
    <nav class="link">
    <h2 class="none">网站导航</h2>
        <ul>
            <li class="active"><a href="index.html">首页</a></li>
            <li><a href="information.html">资讯</a></li>
            <li><a href="ticket.html">票务</a></li>
            <li><a href="about.html">关于</a></li>
        </ul>
    </nav>
</header>

我们决定尝试一下新单位：rem。可是发现一个问题，如果按照基础课程中讲解的，在在 html{}的 CSS 中设置 62.5%相当于 10px，在 Chrome 浏览器却出现偏差。那么统一解决的方法就是设置 625%，默认是 100px，这样达到全兼容。

//默认 100px
html {
    font-size: 625%;
}

//头部 CSS 如下
#header {
    width: 100%;
    height: 0.45rem;
    font-size: 0.16rem;
    margin: 0 auto;
    background-color: #333;
    position: fixed;
    top: 0;
    z-index: 9999;
}
#header .link {
    height: 0.45rem;
    line-height:0.45rem;
}
#header .link li {
    width: 25%;
    text-align: center;
    float: left;
}
#header .link a {
    color: #eee;
    display: block;
}
#header .link a:hover,
#header .active a {
    background-color: #000;
}

三．轮播设计

轮播图片设计比较简单，只不过我们并没有真正的做图片轮播，是一个假的。因为这个设计到 JS 或 JQ 部分知识，并且，还要涉及到移动端触摸以及滑动知识，暂时略过。

//HTML 部分
<div id="adver">
    <img src="img/search.png"alt="search">
</div>

//CSS 部分，设置总区域为 640px
#adver {
    max-width: 6.4rem;
    margin: 0 auto;
    padding: 0.45rem 0 0 0;
}

备注：如果你不适应rem，用 px 也没什么问题。现在很多响应式都还是使用的 px，em计算太麻烦。

四．底部设计

底部参考 PC 端项目，适当缩减即可，长度限制为 640px。

//HTML 部分
<footer id="footer">
    <div class="top">
        客户端 | 触屏版 | 电脑版
    </div>
    <div class="bottom">
        Copyright © YCKU 瓢城旅行社 | 苏 ICP 备 120110119 号
    </div>
</footer>

//CSS 部分
#footer {
    max-width: 6.4rem;
    background-color: #222;
    clear:both;
    margin: 0 auto;
    color: #777;
    text-align: center;
    padding: 0.1rem 0;
}
#footer .top{
    padding: 0 00.05rem 0;
}