自适应模板css样式判断PC电脑端样式手机端样式

我们在日常写模板过程中难免遇到自适应模板，同一个模板要判断电脑端与手机端使用不同的样式，这就需要用到css来判断终端。
如下，电脑端样式：
.app-main figure .ios{width:inherit;
display: block;
margin-top:6px;
padding: 0.3em 1em;
color: #fff;
background-color: #21b47c;
border: 1px solid #21b47c;
text-align: center;
border-radius: 100px;
opacity:.7;}
案例图：

手机端：
@media screen and (max-width:640px){
.app-main figure .ios{
width:inherit;display: block;
margin-top:50px;
padding: 0.3em 1em;
color: #fff;
background-color: #21b47c;
border: 1px solid #21b47c;
text-align: center;
border-radius: 100px;
opacity:.7;}
}
案例图：