CSS3的Media Queries能够检测到的特性总结:

视口(viewport)解释地址:http://baike.baidu.com/view/1522985.htm

width:视口宽度的检测

height:视口高度的检测

device-width:设备屏幕宽度(设备渲染平面宽度)的检测

device-height:设备屏幕高度(设备渲染平面高度)的检测

orientation:设备的横屏与竖屏的检测

aspect-ratio:视口宽度和高度的宽高比的检测

device-aspect-ratio:设备屏幕宽度和高度的宽高比(设备渲染平面宽度和高度的宽高比)的检测

color:每种颜色的位数的检测

color-index:设备的颜色索引表中的颜色数的检测

monochrome:单色帧缓冲区中每像素所使用的位数的检测

resolution:屏幕或打印机的分辨率的检测

scan:电视机的扫描方式的检测

grid:网络设备或位图设备的检测

注意:以上所有特性中,除scan和grid之外,都可以使用min和max前缀来创建一个查询范围。

个别举例:

scan:progressive 逐行扫描,例如:720p HD电视,p表明逐行扫描

scan:interlace 隔行扫描,例如:1080i HD电视,i表明隔行扫描

CSS3媒体查询能检测到的特性小结的更多相关文章

  1. CSS3媒体查询使用小结

    首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: 准备工作1:设置Meta标签 <meta name="viewport" content=& ...

  2. CSS3媒体查询

    随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...

  3. Html5 @media + css3 媒体查询

    css3 media媒体查询器用法总结   随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错 ...

  4. iPhone的CSS3媒体查询

    iPhone的CSS3媒体查询: 各版本的iPhone媒体查询是根据其分辨率和一些CSS3媒体查询的特性来实现媒体查询的...详见下: iPhone6的媒体查询: @media only screen ...

  5. CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices (包括 苹果手表 apple watch)

    /* ----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */ @media only screen and (m ...

  6. iPhone6的CSS3媒体查询

    @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : po ...

  7. CSS3媒体查询总结

    1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...

  8. css3 媒体查询的学习。

    1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...

  9. 关于css3媒体查询和响应式布局

    响应式设计 响应式设计可根据所显示的屏幕大小而改变, 它呈现的每个屏幕看起来并不相同.按照可用的屏幕属性,响应式设计提供了 UI 的最佳效果. 例如,如果网站布局上有一个占据 25% 的屏幕宽度的侧边 ...

随机推荐

  1. 配置nodejs环境

    一.由于node有多种版本号,每个版本号的API肯定也有些细微的差别,在工作中有可能要经常切换node的版本号,因此可以下载nvm使其来管理node的版本号. 首先下载nvm,官网:https://g ...

  2. Mac eclipse 导入文件夹

    貌似发现了个bug: Eclipse IDE for C/C++ Developers Version: Mars.1 Release (4.5.1)Build id: 20150924-1200 M ...

  3. hdu 1503 Advanced Fruits

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1503 思路:这是一道最长公共子序列的题目,当然还需要记录路径.把两个字符串的最长公共字串记录下来,在递 ...

  4. redis非特定类型命令

    1. key查询 keys my* #获取当前数据库中符合模式的所有key exists mykey #查看key是否还存在 2. 数据库操作 redis默认一个实例的数据库是16个[db0-db15 ...

  5. python 线程之 threading(四)

    python 线程之 threading(三) http://www.cnblogs.com/someoneHan/p/6213100.html中对Event做了简单的介绍. 但是如果线程打算一遍一遍 ...

  6. HTTP 头字段总结

    1. Accept: 告诉WEB服务器自己接受什么介质类型,/ 表示任何类型,type/* 表示该类型下的所有子类型,type/sub-type.2. Accept-Charset: 浏览器申明自己接 ...

  7. Queue 的用法

    对Queue 进队出队的使用不是很了解,刷题时想要直接用,所以查了一下.平时用的话用add 和remove 即可. Queue<E> 是接口. LinkedList 实现了Queue接口, ...

  8. BZOJ2454 : TopCoder SRM 463 RabbitPuzzle

    每种状态最多只有三种后继状态:中间往左跳,中间往右跳,两边往中间跳. 如果把它们分别看成左儿子.右儿子.父亲的话,那么会得到一些二叉树. 取出起始状态和终止状态往上跳$k$步的所有状态,其他状态我们只 ...

  9. BZOJ4563: [Haoi2016]放棋子

    Description 给你一个N*N的矩阵,每行有一个障碍,数据保证任意两个障碍不在同一行,任意两个障碍不在同一列,要求你在 这个矩阵上放N枚棋子(障碍的位置不能放棋子),要求你放N个棋子也满足每行 ...

  10. 淘宝弹性布局方案lib-flexible实践

    2个月前,写过一篇文章<从网易与淘宝的font-size思考前端设计稿与工作流>总结过一些移动web中有关手机适配的一些思路,当时也是因为工作的关系分析了下网易跟淘宝的移动页面,最后才有那 ...