CSS3控制移动端和PC端的内容分别显示

CSS3控制移动端和PC端的内容分别显示

  • 最近更新2022年12月14日
免费下载

    特别声明:注册会员根据级别享有相关下载优惠,请仔细辨别。所有资源均收集于互联网仅供学习、参考和研究,请理解这个概念,所以不能保证每个细节都符合你的需求,也可能存在未知的BUG与瑕疵, 你下载的资源和程序源码组件因其特殊性均为可复制品,所以不支持任何理由的退款兑现,请认真阅读本站声明和相关条款后再点击支付下载。

    有时候,我们做网站内容,会要求某些内容只需要在PC端或者移动端显示,想实现这样的效果,我们有很多方式可以使用,今天小编给大家介绍一个利用CSS控制内容分别在PC电脑端或者移动端单独显示的方法教程

    示例代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</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基础;

    分享到 :
    相关推荐

    【早起打卡】最新H5定制版+打卡功能+对接支付+带完整搭建教程

    单独定制的版本,并未流通过,UI很漂亮,专业的早起打开平台,和之前的那个打卡套理财的...

    速来捕鱼手游完整运营版-运营级教程

    测试环境:WindowsServer2008R2SP3IIS7.5+[&hellip...

    古诗词文学类小程序模板

    模板介绍一款实用的古诗词背诵,古诗词查询,学习文学类小程序网页模板下载。图片演示[&...

    狂雨1.2.2小说CMS系统源码带两套优化模板和一套采集规则

    狂雨1.2.2小说CMS系统源码带两套优化模板和一套采集规则1.本站所有资源来源[&...

    发表回复

    登录... 后才能评论