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" />
© 版权声明
THE END
请登录后发表评论
注册
社交帐号登录