• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > 详解CSS3 Media Queries中媒体属性的使用

详解CSS3 Media Queries中媒体属性的使用

作者:梦想天空 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含CSS3,MediaQueries,媒体查询等相关知识,梦想天空 希望在学习及工作中可以帮助到您

媒体属性
大多数媒体属性带有“min-”和“max-”前缀,用于表达“小于等于”和“大于等于”。这避免了使用与HTML和XML冲突的“<”和“>”字符。如果你未向媒体属性指定一个值,并且该特性的实际值不为零,则该表达式被解析为真。

注意:如果浏览器运行的设备上没有该属性值,包含这个属性值的表达式一般返回假。例如,在语音合成器上查询屏幕长宽比总是返回假。
颜色(color)

值: <color>
媒体: visual
是否接受 min/max 前缀:是

指定输出设备每个像素单元的比特值。如果设备不支持输出颜色,则该值为0。

注意:如果每个颜色单元具有不同数量的比特值,则使用最小的。例如,如果显示器为蓝色和红色提供5比特,而为绿色提供6比特,则认为每个颜色单元有5比特。如果设备使用索引颜色,则使用颜色表中颜色单元的最小比特数。
示例

向所有能显示颜色的设备应用样式表:

  1. @media all and (color) { ... }  

向每个颜色单元至少有4个比特的设备应用样式表:

  1. @media all and (min-color: 4) { ... }  

颜色索引(color-index)

值:<integer>
媒体: visual
是否接受 min/max 前缀:是

指定了输出设备中颜色查询表中的条目数量。

示例

向所有使用索引颜色的设备应用样式表,你可以这么做:

  1. @media all and (color-index) { ... }  

向所有使用至少256个索引颜色的设备应用样式表:

  1. <link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />  

宽高比(aspect-ratio)

值:<ratio>
媒体: visual, tactile
是否接受 min/max 前缀:是

描述了输出设备目标显示区域的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数(第一个值)与垂直像素数(第二个值)的比例。

示例

下面为显示区域宽高至少为一比一的设备选择了一个特殊的样式表。

  1. @media screen and (min-aspect-ratio: 1/1) { ... }  

这指定了宽高比或者1:1或者更大。换句话说,可视区域或者是正方形或者是宽屏。

设备宽高比(device-aspect-ratio)

值:<ratio>
媒体:visual, tactile
是否接受 min/max 前缀:是

描述了输出设备的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数(第一个值)与垂直像素数(第二个值)的比例。

示例

下面为宽屏设备选择了一个特殊的样式表。

  1. @media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }  

宽高比或者16:9或者16:10。

设备高度(device-height)

值:<length>
媒体:visual, tactile
是否接受 min/max 前缀:是

描述了输出设备的高度(整个屏幕或页的高度,而不是仅仅像文档窗口一样的渲染区域)。

示例

向显示在最大宽度800px的屏幕上的文档应用样式表,你可以这样做:

  1. <link rel="stylesheet" media="screen and (max-device-width: 799px)" />  

设备宽度(device-width)

值:<length>
媒体: visual, tactile
是否接受 min/max 前缀:是

描述了输出设备的宽度(整个屏幕或页的高度,而不是仅仅像文档窗口一样的渲染区域)。

网格(grid)

值:<integer>
媒体:all
是否接受 min/max 前缀: 否

判断输出设备是网格设备还是位图设备。如果设备是基于网格的(例如电传打字机终端或只能显示一种字形的电话),该值为1,否则为0。

示例

向一个15字符宽度或更窄的手持设备应用样式:

  1. @media handheld and (grid) and (max-width: 15em) { ... }  

注意:“em” 在网格设备中有不同的意义;一个“em”的实际宽度不得而知,假设1em相当于一个网格单元的宽高。
高度(height)

值:<length>
媒体:visual, tactile
是否接受 min/max 前缀:是

height 媒体属性描述了输出设备渲染区域(如可视区域的高度或打印机纸盒的高度)的高度。

注意:用户调整窗口大小后,火狐浏览器会根据使用了width和height属性的媒体查询来切换合适的样式表。
黑白(monochrome)

值:<integer>
媒体: visual
是否接受 min/max 前缀:是

指定了一个黑白(灰度)设备每个像素的比特数。如果不是黑白设备,值为0。

示例

向所有黑白设备应用样式表:

您可能想查找下面的文章:

  • 使用CSS3制作一个简单的进度条(demo)
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果
  • CSS3实现自定义Checkbox特效实例代码
  • 总结30个CSS3选择器
  • CSS3模拟动画下拉菜单效果
  • CSS3动画:5种预载动画效果实例
  • CSS3 仿微信聊天小气泡实例代码

相关文章

  • 2017-08-06css中font的简写方法(包括粗细、大小、行高、字体)
  • 2017-08-06浅析css html span 块状不换行问题
  • 2017-08-06CSS3实现文字波浪线效果示例代码
  • 2017-08-06CSS 数字和字母将容器撑大问题解决
  • 2017-08-06CSS3实现复选框动画特效示例代码
  • 2017-08-06CSS中越界问题的经典解决方案【推荐】
  • 2017-08-06css实例教程 一款纯css实现的垂直时间线效果
  • 2017-08-06关于CSS中 星号*的使用介绍
  • 2017-08-06利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
  • 2017-08-06实列教程 一款基于jquery和css3的响应式二级导航菜单

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 抽屉式导航的设计更能让用户专注于核心的功能
    • csshover.htc可以解决ie6下hover不起作用等兼容问题
    • 用CSS实现的图片透明度链接效果代码
    • 文本输入框 文字左移输入示例代码
    • css中指定下拉列表在firefox中的宽度两种写法
    • css3的transition效果和transfor效果示例介绍
    • IE6/IE7中li底部4px空隙的Bug
    • css小技巧
    • CSS选择器的权重与优先规则分享
    • CSS 使用table布局网页是不明智

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有