css|记录使用@media的尴尬

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

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

【css|记录使用@media的尴尬】一般我常用的是定义一个区间,来写不同的样式,毕竟,TM的搞什么玩意,一个手机就那么大,分辨率还那么大的差别,还有ipad这样平板。
定义区间,就会用到一个关键词 and,它是取直接的交集,而不是并集哦。
比如这样
@media screen and (min-width: 300px) and (max-width: 400px){}好的,走到这一步,一般来说都没啥问题了,但是,一看到但是,就是我的踩坑了。 如果没有设置一下meta的属性,那么你会尴尬的发现,你设置的媒体查询根本不鸟你。好了,这就是这次的小项目的踩坑的大概经历了。

    推荐阅读