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

前端笔记
22年7月28日
编辑

塵風塵風

释放双眼，带上耳机，听听看~！

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) { ... }