Media Queries 写法示例

三种主要方式引入media query

• link方法引入(不同的媒体设备，引入不同的CSS样式表)
  语法结构：
  代码演示：
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  
  

  使用媒体查询技术

  
  

  根据屏幕的不同宽度执行不同的CSS文件

  
  
  
  
  

• 在中的中调用(类似于内部样式表)
  代码演示：
  
  
  
  
  
  
  
  
  

  
  

• 外部样式文件中引入media，然后在HTML中引入这个样式表
  HTML部分：
  
  
  
  
  
  
  
  
  CSS部分：
  /PC屏幕专用样式/
  @media screen and (min-width: 992px){
  .container {
  width: 970px;
  margin: 0 auto;
  }
  @media screen and (min-width: 768px) and (max-width: 991px){
  .container {
  width: 750px;
  margin: 0 auto;
  }

学习资源

• 页面中引入媒体类型方法
• 写法样式