响应式web设计之CSS3 Media Queries

Media Queries

判断设备的不同尺寸引用不同的文件

<link rel="stylesheet" type="text/css" href="styles.css" media="screen and (min-width: 400px)">

意思是当屏幕的宽度大于等于400px的时候，应用styles.css

<link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width: 600px) and (max-width: 800px)">

意思是当屏幕的宽度大于600小于800时，应用style.css

@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
  .class {
    background: #ccc;
  }
}

直接写在<style>标签