WordPress课程广告

CSS控制内容仅在PC显示,移动隐藏

释放双眼,带上耳机,听听看~!

CSS控制内容仅在PC显示,移动隐藏我们可以使用CSS中的@media实现,如果需要对@media了解更多,可以在文章下方的相关资料的链接文档中的资料进行查看。对应的文档对@media有详细的介绍。

@media可以直接应用于样式上,也可以用于判断不同设备引用不同的样式文件

直接应用实例

<div class="hide">
    <div class="links">
        友情链接(隐藏的内容)
    </div>
</div>

控制隐藏样式代码:

@media screen and (max-width: 560px) { 
    .hide{
        display:none; 
        }
}

PS:样式代码的意思是当这段代码的意思是当屏幕宽大小大于设置值时执行{ }内的css样式。

上述代码就是设置当屏幕尺寸达到560像素以下将会自动隐藏该Div层,你也可以根据自己的实际需求自行修改里面的像素值。

给需要控制隐藏的内容 CSS类选中,在引入上述代码,这样需要隐藏的内容就可以在移动端隐藏啦,例如给友情链接这类内容可以使用。可以美化移动端的布局。

判断设备引用样式实例

@media还可以用于直接在link中判断设备的尺寸,然后引用不同的css文件:

当屏幕的宽度大于等于768px的时候,应用flat-style.css

<link rel="stylesheet" type="text/css" href="flat-style.css" media="screen and (min-width: 768px)">

当屏幕的宽度大于992px小于1200px的时候,应用pc-style.css

<link rel="stylesheet" type="text/css" href="pc-style.css"  media="screen and (min-width: 992px) and (max-width: 1200px)">

常见屏幕大小类型

/* 小屏幕(平板,大于等于 768px) */

@media (min-width: @screen-sm-min) { ... }


/* 中等屏幕(桌面显示器,大于等于 992px) */

@media (min-width: @screen-md-min) { ... }


/* 大屏幕(大桌面显示器,大于等于 1200px) */

@media (min-width: @screen-lg-min) { ... }

相关资料:

CSS3 @media查询 | 菜鸟教程

CSS @media 规则 – w3school 在线教程

利用@media与@media screen进行响应式布局 | 511遇见

给TA打赏
共{{data.count}}人
人已打赏
前端笔记

CSS:margin: auto和margin: 0 auto的区别

2022-7-21 22:00:33

前端笔记

CSS设置文本超出隐藏,并显示省略号

2023-4-9 18:31:54

WordPress网站建设宣传图片
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
展开目录