<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>@media</title> <meta name="hugo" content="" /> <style> .test1, .test2 { display: none; } /* 本条为CSS2部分，IE8及以下只支持本条 */ @media screen { body{ color: #f00; } } /* 下列为CSS3部分 */ @media screen and (min-width: 960px) and (max-width: 1024px){ body{ background: #999; } } @media screen and (min-width: 768px) and (max-width: 960px) { .test1 { display: block; } } @media screen and (min-width: 468px) and (max-width: 768px) { .test2 { display: block; } } </style> </head> <body> <div>Media</div> <div class="test1">(min-width: 768px) and (max-width: 960px)</div> <div class="test2">(min-width: 468px) and (max-width: 768px)</div> </body> </html>
原文：http://www.cnblogs.com/hgonlywj/p/4855159.html