@media screen and 不起作用原因汇总。

前缀min-表示“至少”，即“大于等于”的意思。

前缀max-表示“至多”，即“小于等于”的意思。

 

1、div{display:flex;}/*那么div所有的display效果都将无法生效*/

2、格式书写错误and后面必须有空格例如下面代码；

@media screen and (max-width:500px){ }/*生效*/
@media screen and(max-width:500px){ }/*不生效*/

3、样式冲突；@media查询代码的样式被后面的css所覆盖

    建议在书写css的过程中，@media查询带的css写在后面，以免这样避免被前面的css覆盖

4、meta属性viewport属性，这个虽然基本常识，应该也会有人漏掉

    <meta name="viewport" content="width=device-width, initial-scale=1" />

5、括号中的内容内容不能写结束符“;”，以及其它错误