（插一条calc的属性详解）
vw ：Viewport width，即容器（可以是div）的宽度，默认1vw=整个视窗宽度的1%，全屏为100vw。比如视窗宽度为1200px，1vw=120px=1200px*1%，如果是满屏就则为100vw=1200px。
vh ：Viewport height，即容器（如div）的高度，默认1vh=整个可视窗口高度的1%，全屏是100vh。
2. calc（100vmin）也可以达到自适应的效果，但还是用起来效果一般
3. calc(100vw - px) vw是根据屏幕的大小来计算的，屏幕缩小，100vw也会变大
按钮自适应原理是利用a标签和i标签各自一个背景组合成为按钮，达到自适应，具体实现css样式及html结构如下，感兴趣的朋友可以参考下
原理：利用a标签和i标签各自一个背景组合成为按钮，达到自适应。
复制代码
代码如下:
<!DOCTYPE
html>
<html>
<head>
<meta
charset="UTF-8">
<style
type="text/css">
.btn
a{text-decoration:none}
.btn{display:
inline-block
background:
url(s_btn.png)
no-repeat
0
0
height:
22px
line-height:
22px
color:
#666
vertical-align:top}
.btn
i{display:blockfont-style:
normal
font-size:
12px
padding:
0
10px
background:url(s_btn.png)
no-repeat
right
-22px
}
.btn:hover{text-decoration:
nonecolor:#4c8136background-position:
0
-44px}
.btn:hover
i{background-position:
right
-66px}
.btn:active{background-position:
0
-88px}
.btn:active
i{background-position:
right
-110px}
.btn_disabled,
.btn_disabled:hover{background:
url(../img/s_btn.png)
no-repeat
0
-132pxcursor:
default}
.btn_disabled
i,
.btn_disabled:hover
i,
.s_btn_disabled:active
i{background-position:
right
-154pxcolor:#999}
</style>
</head>
<body>
<a
href="#"
class="btn">
<i>这是按钮</i>
</a>
<a
href="#"
class="btn">
<i>按钮</i>
</a>
</body>
</html>
效果：
