记录使用@media的尴尬

以前的用vs code写html的时候，快捷键顺滑的一匹。啥常用的标签都给你生成好了，所以一个粗心的菜鸟，在使用默认的webStrom的时候，遇到了尴尬的事情。
1、首先说一下，媒体的查询中常用的min-width 与 max-width;

min-width,字面意思，最小宽度，就是说，这个样式生效，至少你的分辨率得在这个之下的时候，设置的东西才会生效。
max-width,最大宽度，你设置的东西，得大于这个宽度，样式才会生效。

一般我常用的是定义一个区间，来写不同的样式，毕竟，TM的搞什么玩意，一个手机就那么大，分辨率还那么大的差别，还有ipad这样平板。
定义区间，就会用到一个关键词 and,它是取直接的交集，而不是并集哦。
比如这样

@media screen and (min-width: 300px) and (max-width: 400px){}


好的，走到这一步，一般来说都没啥问题了，但是，一看到但是，就是我的踩坑了。
如果没有设置一下meta的属性，那么你会尴尬的发现，你设置的媒体查询根本不鸟你。

    
    
    好了，这就是这次的小项目的踩坑的大概经历了。