根据屏幕宽度不同设置是否显示内容

css代码在不同屏幕宽度给超文本不同的显示样式,比如设置电脑屏幕不显示图片,或者电脑上某段文字显示绿色,手机上显示红色等等类似的功能

演示

.hidden-lg{            /*设置css选择类*/
        display:none;  /*让资源不显示*/
        }

.hidden-lg是一个选择器类(名可自定义),在里面的样式内容填写display:none,那么这个html内容就会空白。假如将它赋予给一个图片超文本html:<img src="/picture/00.png" alt="图片" width="100%" class="hidden-lg"/>,这时内容将空白,你可以将任何想给图片(或其他内容)添加的样式写在这里

@media screen and (min-width:1200xp){
 /*样式内容*/
}

min和max是对立的,min-width:1200xp在代码的含义是宽度超过1200xp做什么,max-width:1200xp是宽度未超过1200xp做什么,最普通的例子就是用他做到超过屏幕时,是否显示它包括的样式内容

例子

将演示的内容结合,即可实现如电脑屏幕不显示图片,手机却显示

css

@media screen and (min-width:1200xp){
  	.dome{
        display:none;
        }
}

html

<img src="/picture/00.png" alt="图片" width="100%" class="dome" />
温馨提示:本文最后更新于2021-11-18 20:28:52,某些文章具有时效性,若有错误或已失效,请在下方留言或加入QQ群:652857097联系群主。
© 版权声明
THE END
喜欢就支持一下吧
点赞11赞赏 分享
评论 抢沙发

请登录后发表评论