乐于分享
好资源不私藏

利用css判断窗口的大小,来显示或隐藏css特效。

比如想让某个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>的前面。

这样移动端就不会显示了。

未经允许不得转载:9i资源网 » 利用css判断窗口的大小,来显示或隐藏css特效。

评论 抢沙发

评论前必须登录!

立即登录   注册

×
订阅图标按钮