`
好好学习-天天向上
  • 浏览: 36178 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

媒体查询能检测到的特性

 
阅读更多

1.width; 设备的视口宽度;
2.height:屏幕宽度;

3.device-width:设备屏幕的宽度;

4.device-height:设备屏幕的高度;

5.orientation:检测屏幕是横向还是竖向;

6./ˈæspekt/(方面)aspect-ratio:基于视口宽度和高度的宽高比。

    一个16:9比例的显示屏可以定义为,aspect-ratio:16/9;

7.device-aspect-ratio:和aspect-ratio类似,基于设备渲染平面宽度与高度的宽高比;

8.color:每种颜色的位数。如:min-color:16会检测设备是否支持16位颜色;

9.color-index:设备的颜色索引表中的颜色书。值必须是非负整数;

10.monochrome /ˈmɒnəkrəʊm/ 单色:检测单色帧缓冲区中每像素所使用的位数。

     值必须为非负整数,如,monochrome:2;

11.resolution:检测屏幕或打印机的分辨率,如min-resolution:300dpi。

    还可以接受每厘米像素点数的度量值,min-resolution:118dpcom。

12.scan:电视机的扫面方式,值:progressive(逐行扫描)、interlace(隔行扫描)。
    如,720pHD电视(720p的p表明是逐行扫描)匹配scan:progressive,而1080iHD电视(1080i中的i表示隔行扫描)匹配scan:interlace。

13.grid:用来检测输出设备是网络设备还是位图设备。

 

说明:除scan和grid外,都可用min和max前缀来创建一个查询范围。

如:@import: url(“phone.css”) screen and (min-width:200px) and (max-width:360px);

 

此内容摘抄于响应式Web设计(html5与css3实践)第26页下半部分。

分享到:
评论

相关推荐

    H5 media 媒体查询

    2. 查询表达式:媒体查询的核心是查询表达式,用来检测设备的各种特性。例如,`width`表示设备视口宽度,`height`表示设备视口高度,`orientation`则可以判断设备是横屏还是竖屏。 二、媒体查询语法 媒体查询的...

    HTML5 媒体查询

    2. **媒体特征**:媒体查询可以检查各种设备特性,例如`width`(宽度)、`height`(高度)、`orientation`(方向,如portrait或landscape)等。例如,`@media screen and (max-width: 600px)`将匹配宽度不超过600...

    ie兼容媒体查询

    但是,需要注意的是,虽然这些技术可以帮助解决IE8的媒体查询问题,但它们并不能完全复制现代浏览器的媒体查询行为,可能会有性能上的影响。此外,IE8已经非常过时,现在许多网站选择不再支持这种浏览器,而是专注于...

    rtmp流媒体测试工具

    同时,对于标签中的"AMS"和"Red5",它们分别是知名的流媒体服务器,理解它们的特性和配置也是进行有效测试的关键。 总之,RTMP流媒体测试工具是IT专业人士必备的调试助手,通过系统化的测试,可以确保流媒体服务的...

    苏宁易购(rem+媒体查询+移动端)

    接着,媒体查询(Media Queries)是HTML5和CSS3引入的重要特性,用于检测设备的特定特性,如视口宽度、设备方向等,并根据这些特性应用不同的CSS样式。媒体查询允许开发者创建适应不同设备或屏幕尺寸的布局,实现...

    苏宁首页适配1媒体查询布局

    开发人员可能已经编写了CSS媒体查询,定义了不同屏幕尺寸下的样式规则,并进行了充分的测试,确保在各种设备上都能流畅运行。 此外,为了实现高效的前端开发,他们可能还利用了框架和库,如Bootstrap或自定义的CSS...

    React的一个CSS媒体查询组件

    为了实现响应式设计,开发者通常会利用CSS媒体查询(Media Queries)来根据设备特性和视口尺寸应用不同的样式。本文将深入探讨一个专门针对React的CSS媒体查询组件——`react-media`。 `react-media`是一个专门为...

    react-React组件旨在有条件地根据定义的一组元素媒体查询来渲染UI

    在Web开发中,媒体查询广泛用于实现响应式设计,确保网页在不同设备上都能提供良好的用户体验。 在React中,我们可以结合媒体查询来创建响应式的组件。一种常见方法是利用CSS预处理器(如Sass或Less)或者CSS-in-JS...

    响应式Web开发,必懂媒体查询.docx

    3. 特性相关媒体查询:检测浏览器是否支持特定的CSS特性,比如`@supports`规则。 媒体查询的语法如下: ```css @media media-type and (condition) { /* 当条件满足时应用的CSS样式 */ } ``` 其中,`media-type`...

    RTSP流媒体服务器的搭建与测试

    它支持多种流媒体格式,并且具有良好的跨平台特性。live555的服务器使用C++编写,采用模块化设计,易于扩展和维护。 VLC(VideoLAN Client)是一款开源的多媒体播放器,由VideoLAN项目开发。它不仅可以播放各种格式...

    WINDOSxp下多媒体键盘测试软件

    标题中的“WINDOSxp下多媒体键盘测试软件”是一款专为Windows XP设计的工具,旨在帮助用户检测和验证键盘上每一个按键的功能。尤其对于多媒体键盘而言,这款软件能够有效检查每一个媒体控制键是否正常响应,确保用户...

    RTSP+流媒体服务器性能测试工具1

    该测试工具的关键特性在于它能够模拟多个并发用户,通过多线程机制创建多个伪终端实例来发送RTSP信令。RTSP信令包括播放、暂停、停止等控制命令,这些命令用于管理和控制媒体流的传输。同时,测试工具会接收并解析...

    利用媒体查询实现仿星巴克首页布局页面

    在网页设计中,媒体查询...通过这个项目,你不仅能掌握媒体查询的用法,还能了解到如何结合HTML和CSS来构建响应式布局,从而提升网页设计和开发的技能。记得在实际操作时,不断优化和调整,以达到最佳的用户体验。

    CSS3+媒体查询 实现背景切换 320 and up

    在网页设计领域,CSS3(层叠样式表第三版)引入了媒体查询(Media Queries)这一强大特性,使得我们可以根据设备的物理特性,如屏幕宽度、分辨率等,为不同的设备提供适应性的布局和样式。"CSS3+媒体查询 实现背景...

    HarmonyOS应用开发-eTS-媒体查询.docx

    从API Version 7开始,HarmonyOS正式支持媒体查询功能,这是一项重要的特性,允许开发者根据不同的屏幕尺寸、方向等条件调整应用的布局和样式,从而提高用户体验。 #### 二、媒体查询API介绍 在HarmonyOS中,可以...

    苏宁网首页rem+媒体查询+less.zip

    媒体查询是CSS3的一个重要特性,用于检测设备的各种特性,如视口宽度、设备像素比等,并根据这些特性应用不同的样式。在苏宁网首页的设计中,媒体查询被用来实现响应式设计,根据用户设备的屏幕大小改变布局。例如...

    mms流媒体测试源码

    本文将深入探讨与“mms流媒体测试源码”相关的知识点,以及如何利用JNI(Java Native Interface)实现MMS流媒体播放。 首先,我们来了解MMS协议。MMS基于TCP/IP,主要设计用于Windows Media Services服务器,支持...

    媒体查询:这是一个简单的网页,我在其中使用CSS进行媒体查询

    在网页设计领域,媒体查询(Media Queries)是CSS3中的一项关键特性,它允许内容根据设备的特定特性,如视口宽度、设备像素比等,进行适配和布局调整。这个"媒体查询"项目旨在展示如何利用媒体查询来实现响应式网页...

    纯js和CSS3媒体查询制作简单的响应式导航菜单特效源码.zip

    通过媒体查询,我们可以根据设备的特性,如屏幕宽度、分辨率等,应用不同的CSS样式。例如,我们可以定义在小屏幕设备上显示的样式和在大屏幕设备上显示的样式。在源码中,可以看到类似`@media screen and (max-width...

    SZTOOL深圳带宽查询检测软件,测试带宽,检测带宽必备软件

    1. **优化网络使用**:通过带宽测试,用户可以了解到网络的实际性能,从而调整在线活动,如流媒体播放、文件下载或在线游戏,以充分利用网络资源。 2. **故障排查**:当网络速度慢或者不稳定时,使用SZTOOL可以帮助...

Global site tag (gtag.js) - Google Analytics