css3中的媒体查询

媒体查询写在CSS样式代码的最后，CSS是层叠样式表，在同一特殊性下，靠后的的样式会重叠前面的样式

1. 在html头部添加以下代码，用来显示兼容移动设备的显示效果

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

2. 写两个不同宽度的css文件，分别引入

<link rel="stylesheet" type="text/css" href="m320.css" media="only screen and (max-width:320px)"/>
<link rel="stylesheet" type="text/css" href="m480.css" media="only screen and (min-width:321px) and (max-width:375px)"/>

具体的设备宽度，详见

bootstrap的响应式工具

css：

当浏览器的宽度小于900px的时候

@media (max-width: 900px) {
  .mondayDialog .content{
    width: 500px !important;
  }
}

当浏览器的宽度小于600px的时候

@media (max-width: 600px) {
  .mondayDialog .content{
    width: 300px !important;
    font-size: 1vw;
  }
}