html如下（这是一个简单的移动端案例）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link rel="stylesheet" href="less/index.css" type="text/css">
<link rel="stylesheet" href="../lib/font-awesome/css/font-awesome.css">
<script type="text/javascript" src="../js/less.js"></script>
</head>
<body>
<!--版心-->
<div class="container">
<!--顶部通栏-->
<div class="sn_topBar">
<a href="" class="icon_category"></a>
<form action="">
<span class="icon_search"></span>
<input type="search" placeholder="60寸电视免费拿">
</form>
<a href="#" class="icon_cart"></a>
</div>
<!--轮播图-->
<div class="sn_banner">
<ul>
<li><a href=""><img src="../images/banner08.jpg" alt=""></a></li>
<li><a href=""><img src="../images/banner01.jpg" alt=""></a></li>
<li><a href=""><img src="../images/banner02.jpg" alt=""></a></li>
<li><a href=""><img src="../images/banner03.jpg" alt=""></a></li>
<li><a href=""><img src="../images/banner04.jpg" alt=""></a></li>
<li><a href=""><img src="../images/banner05.jpg" alt=""></a></li>
<li><a href=""><img src="../images/banner06.jpg" alt=""></a></li>
<li><a href=""><img src="../images/banner07.jpg" alt=""></a></li>
<li><a href=""><img src="../images/banner08.jpg" alt=""></a></li>
<li><a href=""><img src="../images/banner01.jpg" alt=""></a></li>
</ul>
<ul>
<li class="now"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!--tab选项-->
<div class="sn_tabs">
<div class="tabsT">
<div class="tabsT1">
<img src="../images/nav01.png" alt="">
<p>分类</p>
</div>
<div class="tabsT1">
<img src="../images/nav02.png" alt="">
<p>分类</p>
</div>
<div class="tabsT1">
<img src="../images/nav03.png" alt="">
<p>分类</p>
</div>
<div class="tabsT1">
<img src="../images/nav04.png" alt="">
<p>分类</p>
</div>
<div class="tabsT1">
<img src="../images/nav05.png" alt="">
<p>分类</p>
</div>
</div>
<div class="tabsT">
<div class="tabsT1">
<img src="../images/nav01.png" alt="">
<p>分类</p>
</div>
<div class="tabsT1">
<img src="../images/nav02.png" alt="">
<p>分类</p>
</div>
<div class="tabsT1">
<img src="../images/nav03.png" alt="">
<p>分类</p>
</div>
<div class="tabsT1">
<img src="../images/nav04.png" alt="">
<p>分类</p>
</div>
<div class="tabsT1">
<img src="../images/nav05.png" alt="">
<p>分类</p>
</div>
</div>
</div>
<!--底部标签页-->
<div class="sn_footer">
<ul>
<li>
<a href="javascript:;"><i class="fa fa-home"></i></a>
<p>首页</p>
</li>
<li>
<a href="javascript:;"><i class="fa fa-reorder"></i></a>
<p>分类</p>
</li>
<li>
<a href="javascript:;"><i class="fa fa-file-text-o"></i></a>
<p>必抢清单</p>
</li>
<li>
<a href="javascript:;"><i class="fa fa-user"></i></a>
<p>我的易购</p>
</li>
<li>
<a href="javascript:;"><i class="fa fa-suitcase"></i></a>
<p>新手大礼包</p>
</li>
</ul>
</div>
</div>
</body>
</html>
css如下
@charset “UTF-8”;
@media (min-width: 320px) {
html {
font-size: 42.66666667px;
}
}
@media (min-width: 360px) {
html {
font-size: 48px;
}
}
@media (min-width: 375px) {
html {
font-size: 50px;
}
}
@media (min-width: 384px) {
html {
font-size: 51.2px;
}
}
@media (min-width: 400px) {
html {
font-size: 53.33333333px;
}
}
@media (min-width: 414px) {
html {
font-size: 55.2px;
}
}
@media (min-width: 424px) {
html {
font-size: 56.53333333px;
}
}
@media (min-width: 480px) {
html {
font-size: 64px;
}
}
@media (min-width: 540px) {
html {
font-size: 72px;
}
}
@media (min-width: 640px) {
html {
font-size: 85.33333333px;
}
}
@media (min-width: 720px) {
html {
font-size: 96px;
}
}
@media (min-width: 750px) {
html {
font-size: 100px;
}
}
/reset css/
*,
*::before,
::after {
/所有的标签和伪元素都选中/
margin: 0;
padding: 0;
/防止内容溢出,不出现滚动条.为移动端常用布局/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/点击高亮效果的清除/
tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
}
body {
font-size: 14px;
font-family: “Microsoft YaHei”, sans-serif;
/移动端默认的字体/
color: #333;
}
ul,
ol {
list-style: none;
}
a {
text-decoration: none;
color: #333;
}
input,
textarea {
border: none;
outline: none;
/不允许改变尺寸/
resize: none;
/元素的外观 none指没有任何样式/
-webkit-appearance: none;
}
/common css/
.f_left {
float: left;
}
.f_right {
float: right;
}
.clearFix::before,
.clearFix::after {
content: “”;
display: block;
visibility: hidden;
height: 0;
line-height: 0;
clear: both;
}
.container {
max-width: 750px;
min-width: 320px;
width: 100%;
margin: 0 auto;
position: relative;
padding-top: 0.9rem;
padding-bottom: 1rem;
}
.sn_topBar {
width: 100%;
height: 0.9rem;
background: #fabc09;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
.sn_topBar a {
position: absolute;
top: 0;
width: 0.9rem;
height: 0.9rem;
}
.sn_topBar a.icon_category {
left: 0;
background: url("…/…/images/icon_category.png") no-repeat center / 0.44rem 0.7rem;
}
.sn_topBar a.icon_cart {
right: 0;
background: url("…/…/images/icon_cart.png") no-repeat center / 0.63rem 0.68rem;
}
.sn_topBar form {
width: 100%;
padding: 0 0.9rem;
position: relative;
}
.sn_topBar form .icon_search {
width: 0.3rem;
height: 0.3rem;
position: absolute;
left: 1rem;
top: 0.3rem;
background: url("…/…/images/icon_search.png") no-repeat center / 0.27rem 0.28rem;
}
.sn_topBar form input {
width: 100%;
height: 0.6rem;
margin-top: 0.15rem;
padding-left: 0.5rem;
font-size: 0.24rem;
background: rgba(255, 255, 255, 0.3);
border-radius: 0.05rem;
}
.sn_banner {
width: 100%;
overflow: hidden;
position: relative;
}
.sn_banner ul:first-child {
width: 1000%;
transform: translateX(-10%);
}
.sn_banner ul:first-child li {
width: 10%;
float: left;
}
.sn_banner ul:first-child li a {
display: block;
width: 100%;
}
.sn_banner ul:first-child li a img {
display: block;
width: 100%;
}
.sn_banner ul:last-child {
position: absolute;
right: 0.2rem;
bottom: 0.2rem;
}
.sn_banner ul:last-child li {
margin-left: 0.12rem;
width: 0.12rem;
height: 0.12rem;
border-radius: 50%;
background-color: #fff;
float: left;
}
.sn_banner ul:last-child li.now {
background: #fabc09;
}
.sn_tabs {
width: 100%;
overflow: hidden;
}
.sn_tabs .tabsT {
width: 100%;
}
.sn_tabs .tabsT .tabsT1 {
width: 20%;
float: left;
margin-top: 10px;
}
.sn_tabs .tabsT .tabsT1 img {
width: 1.1rem;
height: 1.1rem;
display: block;
margin: 0 auto;
}
.sn_tabs .tabsT .tabsT1 p {
font-size: 0.16rem;
text-align: center;
margin-bottom: 10px;
}
.sn_footer {
width: 100%;
height: 1rem;
position: fixed;
border-top: 1px solid #ccc;
bottom: 0;
left: 0;
background-color: white;
}
.sn_footer ul li {
width: 20%;
height: 100%;
float: left;
text-align: center;
}
.sn_footer ul li a i {
margin-top: 0.15rem;
}
.sn_footer ul li a i:before {
font-size: 0.35rem;
}
.sn_footer ul li p {
text-align: center;
font-size: 0.16rem;
}
/# sourceMappingURL=index.css.map */
其实和pc端普通排版差不多，只是将宽高改了个样子能使其等比例缩放，看宽高就行