1.reset.css

/*將標籤預設的間距設為0*/
body,ul,p,h1,h2,h3,h4,h5,h6,dl,dd,input,selector,form{
    margin: 0;padding: 0;
}

/*讓h標籤繼承body內設定的字型大小*/
h1,h2,h3,h4,h5,h6{
    font-size: 100%;
}


/*去掉預設的列表標籤*/
ul{
    list-style: none;
}

/*設定em文字不傾斜*/
em{
    font-style: normal;
}

/*清除下劃線*/
a{
    text-decoration: none;
}

/*清除圖片的邊框*/
img{
    border: none;
}

/*清楚margin-top塌陷和浮動問題*/
.clearfix:before,.clearfix:after{
    content: "";
    display: table;
}

.clearfix:after{
    clear: both;
}
/*解決ie清楚浮動的問題*/
.clearfix{
    zoom: 1;
}

/*向左浮動*/
.fl{
    float: left;
}
/*向右浮動*/
.fr{
    float: right;
}
 

2.main.css

body{
    font-family: 'Microsoft Yahei';
    color: #666;
}

.main_wrap{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: gold;
}

/*頂部標題欄*/
.header{
    height: 2.5rem;
    background-color: #37ab40;
    position: relative;
}
.header .logo{
    display: block;
    width: 4.45rem;
    height: 1.8rem;
    margin: 0.35rem auto 0;
}

.header .logo img{
    width: 100%;
}

.header .search{
    position: absolute;
    width: 1.35rem;
    height: 1.35rem;
    right: 0.75rem;
    top: 0.625rem;
    background: url("../image/icons.png") left top;
    background-size: 3rem 42rem;
}

.center_wrap{
    position: absolute;
    left: 0;
    right: 0;
    top: 2.5rem;
    bottom: 2.5rem;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #efefef;
}
.slide img{
    width: 100%;
}

.menu_con{
    height:9.25rem;
    background-color:#fff;
    margin-top:0.5rem;
    overflow:hidden;
}

.menu{
    width:19rem;
    height:8.1rem;
    margin:0.7rem 0 0 1.375rem;
}

.menu li{
    width:2.8rem;
    height:4.1rem;
    float:left;
    margin-right:1.625rem;
}

.menu li a{
    display:block;
    width:2.8rem;
    height:2.8rem;
    background:url(../image/icons.png) left -3rem no-repeat;
    background-size:3rem 42rem;
}

.menu li h2{
    height:1.3rem;
    font:13px/1.3rem 'Microsoft Yahei';
    color:#666;
    text-align:center;
}


.menu li:nth-child(2) a{
    background-position:left -6rem;
}
.menu li:nth-child(3) a{
    background-position:left -9rem;
}
.menu li:nth-child(4) a{
    background-position:left -12rem;
}
.menu li:nth-child(5) a{
    background-position:left -15rem;
}
.menu li:nth-child(6) a{
    background-position:left -18rem;
}
.menu li:nth-child(7) a{
    background-position:left -21rem;
}
.menu li:nth-child(8) a{
    background-position:left -24rem;
}

.common_model{
    background-color: #fff;
    margin: 0.5rem 0;
}

.common_title{
    width: 17.75rem;
    height: 0.9rem;
    margin: 0.8rem auto 0;
}

.common_title h3{
    border-left: 0.25rem solid #fbc83d;
    font: bold 15px/0.9rem 'Microsoft Yahei';
    color: #fbc83d;
    text-indent: 0.4rem;
}

.common_title a{
    font: 12px/0.9rem 'Microsoft Yahei';
    color: #7f7f7f;
}

.banner{
    width: 17.75rem;
    height: 4.5rem;
    margin: 0.5rem auto 0;
}

.banner img{
    width: 100%;
}

.goods_list{
    width: 17.75rem;
    height: 9.35rem;
    margin: 0.5rem auto 0.7rem;
}

.goods_list li{
    float: left;
    width: 5.8rem;
    height: 9.35rem;
    border-right: 1px solid #e7e7e7;
    position: relative;
}

.goods_list li:last-child{
    border-right: 0px;
}

.goods_list li .goods_pic{
    display: block;
    width: 4.5rem;
    height: 4.5rem;
    margin: 0.5rem auto 0;

}
.goods_list li .goods_pic img{
    width: 100%;
}

.goods_list li .goods_name{
    width: 5.0rem;
    overflow: hidden;
    /*不進行換行*/
    white-space: nowrap;
    /*使用省略號*/
    text-overflow: ellipsis;
    font:15px/15px 'Microsoft Yahei';
    color:#666;
    margin:0.75rem auto 0;
}

.goods_list li .goods_unit{
    width:5rem;
    font:12px/12px 'Microsoft Yahei';
    color:#bbb;
    margin:0.8rem auto 0;

}

.goods_list li .goods_price{
    width:5rem;
    font:12px/12px 'Microsoft Yahei';
    color:#ff4400;
    margin:0.5rem auto 0;
}

.goods_list li .add_chart{
    position: absolute;
    right: 0.675rem;
    bottom: 0;
    width: 1.7rem;
    height: 1.7rem;
    background:url("../image/icons.png") left top -27rem no-repeat;
    background-size: 3rem 42rem;
}


@media (min-width: 380px) {
    .goods_list li .goods_price{
        font: 14px/14px 'Microsoft Yahei';
    }

    .goods_list li .goods_unit{
        font:14px/14px 'Microsoft Yahei';
    }
}

.footer{
    position: absolute;
    height: 2.5rem;
    width: 100%;
    background-color: #fff;
    left: 0;
    bottom: 0;
}

.footer  li{
    width:25%;
    height:2.5rem;
    float:left;
}

.footer li a{
    display:block;
    width:1.375rem;
    height:1.3rem;
    margin:0.25rem auto 0;
    background:url(../image/icons.png) left -30rem no-repeat;
    background-size:3rem 42rem;
}


.footer li:nth-child(2) a{
    background-position:left -33rem;
}

.footer li:nth-child(3) a{
    background-position:left -36rem;
}

.footer li:nth-child(4) a{
    background-position:left -38.95rem;
}

.footer li h2{
    font:12px/12px 'Microsoft Yahei';
    color:#949392;
    text-align:center;
    margin-top:0.2rem;
}

 

3.set_root.js

(function(){
	var calc = function(){
		var docElement = document.documentElement;
		var clientWidthValue = docElement.clientWidth > 750 ? 750 : docElement.clientWidth;
		docElement.style.fontSize = 20*(clientWidthValue/375) + 'px';
	}
	calc();
	window.addEventListener('resize',calc);
})();
 

4.index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--設定視口,解決pc和手機螢幕不匹配問題-->
    <meta name="viewport" content="width=device-width,
     initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <script type="text/javascript" src="js/set_root.js"></script>
    <link type="text/css" rel="stylesheet" href="css/reset.css"/>
    <link type="text/css" rel="stylesheet" href="css/main.css"/>
    <title>app首頁</title>
</head>
<body>
<div class="main_wrap">
    <div class="header clearfix">
        <a href="#" class="logo"><img src="image/logo.png" alt="天天生鮮-logo"></a>
        <a href="#" class="search"></a>
    </div>

    <div class="center_wrap">

        <div class="slide">
            <img src="image/slide.jpg" alt="幻燈片">
        </div>

        <div class="menu_con clearfix">
            <ul class="menu">
                <li>
                    <a href=""></a>
                    <h2>水果</h2>
                </li>
                <li>
                    <a href=""></a>
                    <h2>海鮮</h2>
                </li>
                <li>
                    <a href=""></a>
                    <h2>肉類</h2>
                </li>
                <li>
                    <a href=""></a>
                    <h2>禽蛋</h2>
                </li>
                <li>
                    <a href=""></a>
                    <h2>蔬菜</h2>
                </li>
                <li>
                    <a href=""></a>
                    <h2>速凍</h2>
                </li>
                <li>
                    <a href=""></a>
                    <h2>熱賣</h2>
                </li>
                <li>
                    <a href=""></a>
                    <h2>新品</h2>
                </li>
            </ul>
        </div>

        <div class="common_model clearfix">

            <div class="common_title">
                <h3 class="fl">新鮮水果</h3>
                <a href="#" class="fr">更多&gt;</a>
            </div>

            <div class="banner"><img src="image/banner.jpg" alt="banner"></div>

            <ul class="goods_list">
                <li>
                    <a href="#" class="goods_pic"><img src="image/goods.jpg"alt="商品圖片"></a>
                    <h4 class="goods_name">紐西蘭皇家大紅富士</h4>
                    <p class="goods_unit">12/提</p>
                    <p class="goods_price">￥68.00</p>
                    <a href="#" class="add_chart"></a>
                </li>

                <li>
                    <a href="#" class="goods_pic"><img src="image/goods.jpg"alt="商品圖片"></a>
                    <h4 class="goods_name">紐西蘭皇家大紅富士</h4>
                    <p class="goods_unit">12/提</p>
                    <p class="goods_price">￥68.00</p>
                    <a href="#" class="add_chart"></a>
                </li>


                <li>
                    <a href="#" class="goods_pic"><img src="image/goods.jpg"alt="商品圖片"></a>
                    <h4 class="goods_name">紐西蘭皇家大紅富士</h4>
                    <p class="goods_unit">12/提</p>
                    <p class="goods_price">￥68.00</p>
                    <a href="#" class="add_chart"></a>
                </li>
            </ul>
        </div>

        <div class="common_model clearfix">

            <div class="common_title">
                <h3 class="fl">新鮮水果</h3>
                <a href="#" class="fr">更多&gt;</a>
            </div>

            <div class="banner"><img src="image/banner.jpg" alt="banner"></div>

            <ul class="goods_list">
                <li>
                    <a href="#" class="goods_pic"><img src="image/goods.jpg"alt="商品圖片"></a>
                    <h4 class="goods_name">紐西蘭皇家大紅富士</h4>
                    <p class="goods_unit">12/提</p>
                    <p class="goods_price">￥68.00</p>
                    <a href="#" class="add_chart"></a>
                </li>

                <li>
                    <a href="#" class="goods_pic"><img src="image/goods.jpg"alt="商品圖片"></a>
                    <h4 class="goods_name">紐西蘭皇家大紅富士</h4>
                    <p class="goods_unit">12/提</p>
                    <p class="goods_price">￥68.00</p>
                    <a href="#" class="add_chart"></a>
                </li>


                <li>
                    <a href="#" class="goods_pic"><img src="image/goods.jpg"alt="商品圖片"></a>
                    <h4 class="goods_name">紐西蘭皇家大紅富士</h4>
                    <p class="goods_unit">12/提</p>
                    <p class="goods_price">￥68.00</p>
                    <a href="#" class="add_chart"></a>
                </li>
            </ul>
        </div>

    </div>


    <div class="footer">
        <ul>
            <li>
                <a href=""></a>
                <h2>首頁</h2>
            </li>
            <li>
                <a href=""></a>
                <h2>分類</h2>
            </li>
            <li>
                <a href=""></a>
                <h2>購物車</h2>
            </li>
            <li>
                <a href=""></a>
                <h2>我的</h2>
            </li>
        </ul>

    </div>

</div>
</body>
</html>