<!doctype html> <html> <head> <meta charset=utf-8> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1"> </head> <body> <style type=text/css> /*当浏览器尺寸小于960px时候的代码：*/ @media screen and (max-960px){ body{ background:green; } } /*当浏览器尺寸等于960px时候的代码：*/ @media screen and (max-device-960px){ body{ background:red; } } /*当浏览器尺寸大于960px时候的代码：*/ @media screen and (min-960px){ body{ background:blue; } } /*混合使用上面的用法： @media screen and (min-960px) and (max-1200px){ body{ background:yellow; } }*/ </style> </body> </html>