我们做网站内容，会要求某些内容只需要在PC端或者移动端显示，想实现这样的效果，我们有很多方式可以使用，今天小编给大家介绍一个利用CSS控制内容分别在PC电脑端或者移动端单独显示的方法教程
实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QQ沐编程测试</title>
</head>
<body>
<div class="onlywap">移动端显示的内容</div>
<div class="onlymobile">电脑端显示的内容</div>
<style>
.onlywap{display: inline;}
@media (min-width: 950px){.onlywap{display:none;}}
.onlymobile{display: none;}
@media (min-width: 950px){.onlymobile{display:inline;}}
</style>
</body>
</html>实现原理
用CSS判断页面的大小，大于950px就显示PC端内容，小于950px就显示移动端内容。
本篇文章就是关于用CSS控制移动端和PC端的内容分别显示的教程，希望对感兴趣的朋友有一定的帮助！更多css知识，可以关注CSS3基础
最后
如上面的html代码，电脑端和手机端会显示不同的内容，可以是显示不同的文字，也可以是不同的图片，电脑上显示你设定的图片，手机端同样的位置显示你设定的另一张图片。
你只需要将上面的样式和div拿下来加到你的网站即可实现你想要的效果了，也可以自定义页面大小，想要的就快去试试吧
© 版权声明
本站资源来自互联网收集，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系站长并出示版权证明以便删除。敬请谅解！
THE END
