我们在日常写模板过程中难免遇到自适应模板,同一个模板要判断电脑端与手机端使用不同的样式,这就需要用到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主机交流](https://www.hostjl.com/wp-content/hctimg/20220928/1658923785-92f40132e36bc3999.jpg)
手机端:
@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主机交流](https://www.hostjl.com/wp-content/hctimg/20220928/1658924057-95bc1de24a19404100.jpg)
© 版权声明
THE END










暂无评论内容