* 手机端的单位一般是rem[链接](https://github.com/amfe/article/issues/17)
~~~
/*
rem是相对于根元素,html的font-size而言
1rem=1rem iphone7 vw=10rem
1rem=.853333rem iphone5 vw=10rem
1rem=1.656rem iphone6plus vw=10rem
*/
/*
flexible-->将布局视口的width等分成10rem;
*/
~~~
实例
# [码云效果](https://dingmeili.gitee.io/effect)
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_803285_4k53sn7bf8o.css">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
div{
box-sizing: border-box;
}
.top{
width: 10rem;
background:#a78ada;
text-align: center;
height: 1.5625rem;
position: relative;
}
.top-wrap{
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
height: .8125rem;
}
.top ul{
margin-left:auto;
margin-right: auto;
display: flex;
justify-content: center;
width: 5.3125rem;
border: .015625rem solid #fff;
border-radius: .15625rem;
overflow: hidden;
}
.top li{
width: 1.875rem;
line-height: .8125rem;
background: #a78ada;
color: #fff;
font-size: .390625rem;
}
.top li:not(:first-child){
border-left: .015625rem solid #fff;
}
li:hover{
background: #ccc;
}
.top .current{
background: #ccc;
}
.container{
width: 10rem;
height: 3.125rem;
border-bottom: .015625rem solid #aaa;
}
.row::after{
content: "";
display: block;
clear: both;
}
.left{
float: left;
width: 2.96875rem;;
height: 3.125rem;
background: url("3.png") no-repeat center ;
background-size: 100%,100%
}
.right{
float: left;
width: 7.03125rem;
padding: .15625rem;
}
p{
font-size: .34375rem;
height: 1.5625rem;
}
span{
color: #ff446a;
}
input{
background: #fff;
border: .015625rem solid #333;
border-radius: .125rem;
width: 1.875rem;
height: .78125rem;
}
.right-wrap{
display: flex;
justify-content: space-between;
align-items: center;
}
i{
position: absolute;
left: .703125rem;
font-size: .859375rem !important;
color: #fff;
display: block;
}
</style>
</head>
<body>
<div class="top">
<div class="top-wrap">
<i class="iconfont icon-jiantou"></i>
<ul>
<li class="current">商品</li>
<li>百科</li>
<li>问答</li>
</ul>
</div>
</div>
<div class="container row">
<div class="left">
</div>
<div class="right">
<p>wonsee 萌萌蛋 智能奶瓶 宽口径硅胶智能奶瓶 M116-MAX 250ml 粉色</p>
<div class="right-wrap">
<span>￥299</span><input type="submit" placeholder="" value="相似商品">
</div>
</div>
</div>
</body>
</html>
~~~
