媒体查询

移动端使用媒体查询兼容ipad等大屏幕设备

@media(min-800px){}   //当屏幕宽度大于800像素时
@media(max-800px){}   //当屏幕宽度小于800像素时

@media(min-700px){    //此处应注意css样式优先级的使用。否则优先级过低则样式不会生效
    #everyReport{    //建议媒体查询中的样式优先级高于原本的样式优先级，如这里使用id选择器
        //margin-right: 10px！important;  //如这里，尽量不要使用!important，避免不必要的冲突
           margin-right: 10px;
        &:nth-child(3n){
            margin-right: 0;
        }
    }
}
@media(min-980px){   
    #everyReport{
        margin-right: 10px
        &:nth-child(4n){
            margin-right: 0;
        }
    }
}

注：可能有人看到有另一种写法@media screen and (max- 960px){}  ，比上面写法多了screen and ，他的意思是在告知设备在打印页面时使用衬线字体，在屏幕上显示时用无衬线字体。但是目前我发现很多网站都会直接省略screen,因为你的网站可能不需要考虑用户去打印时，你可以省略screen and