自适应模板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;}

 

图片[1]-自适应模板css样式判断PC电脑端样式手机端样式-HostJL-VPS主机交流

 

手机端:

@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;}
}

图片[2]-自适应模板css样式判断PC电脑端样式手机端样式-HostJL-VPS主机交流

© 版权声明
THE END
喜欢就支持一下吧
点赞14 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容