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

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

演示

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

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

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

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

例子

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

css

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

html

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

    请登录后发表评论