移动端Footer部分

注意：

移动端首先要对字体进行换算，下面有两种方法
	1. html{font-size: 13.3333vw;} /* 100 除以 设计图 的百分之一 (vw) */
		eg:设计图为750px，则100÷750=13.8888，此时100px=1rem，14px=.14rem
	2. html{font-size: 62.5% ;} /* 10 除以 字体的大小 ，10÷16=0.625*/
		eg:10px=1rem,25px=2.5rem

html

<link rel="stylesheet" href="css/public.css" >
-------------------------------------------------------
<footer>
	<ul>
    	<li><a href="#"><i class="i1"></i><span>消息</span></a></li>
        <li><a href="#"><i class="i2"></i><span>联系人</span></a></li>
        <li><a href="#"><i class="i3"><s>1</s></i><span>动态</span></a></li>
        <li><a href="#"><i class="i4"><s>1</s></i><span>我的</span></a></li>
    </ul>
</footer>

css

footer{ height:.97rem; border-top:.01rem solid #bfbfbf; position:fixed;right:0;left:0;bottom:0; background:#fff;}
footer ul{ display:flex; justify-content:space-around;}
footer ul li{ margin-top:.14rem;}
footer ul a span{display:block;font:.2rem/.32rem ""; color:#808080; text-align:center;}
footer ul li a{display:block;}
footer ul li a i{ display:block; position:relative;background:url(../images/bg.png) no-repeat; background-size:1rem 1.5rem; width:.5rem; height:.5rem; margin:0 auto;}
footer ul li a i.i2{background-position:-.5rem -.5rem;}
footer ul li a i.i3{ background-position:-.5rem -1rem;}
footer ul li a i.i4{ background-position:-.5rem -.5rem;}
footer ul li a i.i1{ background-position:-.5rem 0;}
footer ul li a i.i2{background-position:0 -.5rem;}
footer ul li a i.i3{ background-position:0 -1rem;}
footer ul li a i.i4{ background-position:0 0rem;}