@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。