首页 > 开发 > CSS > 正文

CSS3中的Media Queries学习笔记

2024-07-11 08:32:56
字体:
来源:转载
供稿:网友

一、Media Queries 支持的属性
2016523115225102.png (483×314)

2016523115243298.png (423×217)

二、关键字
and - 结合多个媒体查询 not - 排除某种制定的媒体类型 only - 用来定某种特定的媒体类型

三、引用样式示例

CSS Code复制内容到剪贴板
  1. <link rel="stylesheet" media="all" href="style.css" />    <link rel="stylesheet" media="screen and (min-width:980px)" href="desktop.css" />   
  2. <link rel="stylesheet" media="screen and (min-width:768px) and (max-width:980px)" href="pad.css" />    <link rel="stylesheet" media="screen and (min-width:480) and (max-width: 768px)" href="phone.css" />   
  3. <link rel="stylesheet" media="screen and (max-width:320px)" href="small.css" />  

四、内联样式示例

CSS Code复制内容到剪贴板
  1. @media screen and (min-width: 980px) {        //css code  
  2. }    @screen and (min-width:768px) and (max-width:980px) {   
  3.     //css code   }   
  4. @screen and (min-width:480) and (max-width: 768px) {        //css code  
  5. }    @screen and (max-width:320px) {   
  6.     //css code   }   
  7.    @media screen and (max-device-width: 480px) {   
  8.     //max-device-width等于480px   }   
  9. @media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) {        //设备宽高比   
  10. }    @media all and (orientation:portrait) {   
  11.     //竖屏    }   
  12. @media all and (orientation:landscape) {        //横屏   
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表