media query的学习资料

学习media query可以参考官方网址：

https://www.w3.org/TR/css3-mediaqueries/

今天运到一个问题，在使用chrome调试media query效果时，使用调试窗口来调整页面大小，效果如期望的展现。但是如果直接调整浏览器大小，部分大小时候做到了自适应，但是当窗口resize到一定大小后，并没有发生变化。不知道是不是浏览器的bug.

代码如下：

   @media screen and (max-width: 450px) {
            .sm-graph-container {
                font-size: 0.22em;
            }
        }

        @media screen and (max-width: 630px){
            .sm-graph-container {
                font-size: 0.32em;
            }
        }

        @media screen and (max-width: 720px){
            .sm-graph-container {
                font-size: 0.45em;
            }
        }

        @media screen and (max-width: 765px){
            .sm-graph-container {
                font-size: 0.5em;
            }
        }
        @media screen and (max-width: 1050px){
            .sm-graph-container {
                font-size: 0.6em;
            }
        }

        @media screen and (max-width: 1125px){
            .sm-graph-container {
                font-size: 0.7em;
            }
        }

在窗口大小在720px和1125px之间resize时，工作正常。到了720px之后就字体不能变小。但是调试窗口中responsive工作正常。