@media和@media screen和@media only screen用法、做用、区别

Web前端评论462阅读模式

网页宽度小于1200象素生效

@media (max-width:1200px){}

屏幕宽度小于1200象素生效

@mdia screen and(max-width:1200px){}

仅屏幕最大可见区域宽度为1200象素生效

@media only screen and (max-width:1200px){}


利用@media screen实现网页布局的自适应示例,以下几乎含盖了所有输出设备(手机、平板、各种分辨的电脑显示器)

只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值

1280分辨率以上(大于1200px)

@media screen and (min-width:1200px){}

1100分辨率(大于960px,小于1199px)

@media screen and (min-width: 960px) and (max-width: 1199px) {}

880分辨率(大于768px,小于959px)

@media screen and (min-width: 768px) and (max-width: 959px) {}

720分辨率(大于480px,小于767px)

@media only screen and (min-width: 480px) and (max-width: 767px){}

440分辨率以下(小于479px)

@media only screen and (max-width: 479px) {}

@media  screen的css在打印设备里是无效的,而@media在打印设备里是有效的,这就是它们的区别了。

如果css需要用在打印设备里,那么就用@media ,否则,就用@media  screen。

本站文章大部分始于原创,用于个人学习记录,可能对您有所帮助,仅供参考!

weinxin
我的微信
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

拖动滑块以完成验证