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

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

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

本文主要包含css3 media queries,media queries,mediaqueries.js,css media queries,queries等相关知识,梦想天空 希望在学习及工作中可以帮助到您

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

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

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

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

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

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

</div>
  1. @media all and (color) { ... }  
</div> </div>

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

</div>
  1. @media all and (min-color: 4) { ... }  
</div> </div>

颜色索引(color-index)

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

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

示例

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

</div>
  1. @media all and (color-index) { ... }  
</div> </div>

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

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

宽高比(aspect-ratio)

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

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

示例

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

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

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

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

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

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

示例

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

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

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

设备高度(device-height)

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

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

示例

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

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

设备宽度(device-width)

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

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

网格(grid)

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

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

示例

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

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

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

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

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

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

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

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

示例

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

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

  • 详解CSS3 Media Queries中媒体属性的使用
  • 详解CSS3中@media的实际使用
  • 详解CSS3中Media Queries的相关使用
  • 简单介绍CSS3中Media Query的使用
  • CSS3 Media Queries详细介绍和使用实例
  • CSS3媒体查询(Media Queries)介绍
  • 彻底弄明白CSS3的Media Queries(跨平台设计)
  • CSS3 media queries + jQuery实现响应式导航

相关文章

  • 2017-06-02纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
  • 2017-06-02纯CSS改变webkit内核浏览器的滚动条样式
  • 2017-06-02CSS3实现精美横向滚动菜单按钮
  • 2017-06-02真正了解CSS3背景下的@font face规则
  • 2017-06-02CSS3弹性盒模型flex box快速入门心得(必看篇)
  • 2017-06-02css3实现针线缝合效果(图解步骤)
  • 2017-06-02CSS3动画:5种预载动画效果实例
  • 2017-06-02深入CSS3 动画效果的总结详解
  • 2017-06-02纯css3实现的竖形无限级导航
  • 2017-06-02移动Web—CSS为Retina屏幕替换更高质量的图片

文章分类

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

最近更新的内容

    • 详解CSS3的opacity属性设置透明效果的用法
    • css3中背景尺寸background-size详解
    • 使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
    • CSS3动画:5种预载动画效果实例
    • CSS图片翻转动画技术详解(IE也实现了)
    • 基于css3 animate制作绚丽的动画效果
    • 分享CSS3制作卡片式图片的方法
    • 利用CSS3实现折角效果实例源码
    • 使用css3背景渐变中的透明度来设置不同颜色的背景渐变
    • CSS3中设置3D变形的transform-style属性详解

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

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