文章开始
文章结尾
我们做网站内容，会要求某些内容只需要在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拿下来加到你的网站即可实现你想要的效果了，也可以自定义页面大小，想要的就快去试试吧
<!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>