下面的代码除了
@media screen and (max-width: 768px){ body{ background-color: orange; } }
这几行不起作用，其他都能起作用。
<style> body{ background-color: red; } @media screen and (max-width: 768px){ body{ background-color: orange; } } @media screen and (min-width: 768px) and (max-width: 992px){ body{ background-color: #0000FF; } } @media screen and (min-width: 992px) and (max-width: 1200px){ body{ background-color: pink; } } @media screen and (min-width: 1200px){ body{ background-color: purple; } } </style>接下来说一下会造成这种结果的几种原因：
1、格式书写错误，and前后需加空格，如：
@media screen and (max-width: 768px)2、样式冲突：@media查询代码被后面的CSS代码覆盖
建议卸载CSS代码最后面，以免被前面的CSS代码覆盖
3、忘记加meta：meta属性viewport属性，这个虽然基本常识，应该也会有人漏掉
<meta name="viewport" content="width=device-width, initial-scale=1" />4、括号中的内容内容不能写结束符“;”，以及其它错误
