请选择 进入手机版 | 继续访问电脑版
开启辅助访问
帐号登录 |立即注册

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

 
网页宽度小于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。

回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。