记一次meta viewport引起的问题

最近在项目中需要使用媒体查询来支持多种设备(PC / tablet / mobile)的页面布局，

最开始的时候加入下面的代码并不起效果，最终我们通过查询才知道需要在meta中加入viewport的标签才能让媒体查询生效，仔细阅读过下面的文章觉得写得还是很深入的，贴出来和大家分享一下

@media screen and (max-width: 1100px) and (min-width: 780px)
{

.signInModule-title {
    background: blue;
}
}
@media screen and (max-width: 600px) and (min-width: 300px)
{
    
.signInModule-title {
    background: red;
}
}

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

https://www.cnblogs.com/yuduxyz/p/9745962.html