比如想让某个css特效只在手机端显示或者只在电脑端显示。
就像我的博客现在的两个灯笼,我只想让它在电脑端显示,不让它在手机端显示,那么该怎么办呢!
其实很简单,我们只需要给css特效加个判断就能现实了,看下面的代码!!!(注:我这里以我博客的灯笼css为例,但是对于其他css特效的原理其实是相通的!!!
灯笼css代码地址:css挂灯笼)
只在电脑端显示:
<div class="deng-box">/*这是第一个灯笼*/ <div class="deng-box1">/*这是第二个灯笼*/ <style> .deng-box,.deng-box1{display: none;}/*选择class的属性值*/ @media (min-width: 678px){.deng-box,.deng-box1{display:inline;}}/*显示器低于我们定义的尺寸,我们判断为移动端*/ </style> /*判断为手机用户不显示*/
只在手机端显示:
<div class="deng-box">/*这是第一个灯笼*/ <div class="deng-box1">/*这是第二个灯笼*/ <style> .deng-box,.deng-box1{display: inline;}/*选择class的属性值*/ @media (min-width: 1200px){.deng-box,.deng-box1{display:none;}} </style>
代码简单明了,使用方法应该都明白了吧!
比如我,不想让灯笼在移动端显示,我就把下面的代码添加到灯笼css的</style>的前面。
这样移动端就不会显示了。
评论前必须登录!
立即登录 注册