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. jquery返回滚动条顶部

    var $view = $('html,body'),$backTop = $('#backTop'), $backTop.on('click',function(){ $view.animate({ ...

  2. c#中取整，向上取，向下取

    Math.Ceiling()向上取整, Math.Floor()向下取整 示例: d = 4.56789 Math.Ceiling(Convert.ToDecimal(d)).ToString();M ...

  3. ElasticSearch(站内搜索）

    简介 Elasticsearch是一个实时的分布式搜索和分析引擎.它可以帮助你用前所未有的速度去处理大规模数据.它可以用于全文搜索,结构化搜索以及分析,当然你也可以将这三者进行组合.Elasticse ...

  4. oracle 12c中的隐含列

      Invisible Columns 使用select * from ,desc 等看不到该列, DROP TABLE tab1 PURGE; CREATE TABLE tab1 ( id NUMB ...

  5. 不会全排列算法(Javascript实现)，我教你呀！

    今天我很郁闷,在实验室凑合睡了一晚,准备白天大干一场,结果一整天就只做出了一道算法题.看来还是经验不足呀,同志仍需努力呀. 算法题目要求是这样的: Return the number of total ...

  6. Visual Studio 插件的开发（转）

    起因 在做项目的时候,经常需要根据表结构create一些实体类,写多了,实在是觉得无趣,于是就琢磨着做个代码生成工具.当然现在有很多现成的,拿来用就好,可是总想自己弄个出来玩玩,一来是当初用DataS ...

  7. 一个print的简单错误

    原因是python 2.X 可以print 内容 而3.X 取消了这种写法 改成了print(内容)

  8. css3折叠效果

    在开发过程中,经常会遇到一些交互效果,今天所联系的便是一个类似折纸的折叠效果,查看效果. 说到折纸,我们先看下图 这是我第一时间想到的大体思路,如果能让这6个面连续的变化角度到0不就可以了吗,运用cs ...

  9. 【填坑向】spoj COT/bzoj2588 Count on a tree

    这题是学主席树的时候就想写的,,, 但是当时没写(懒) 现在来填坑 = =日常调半天lca(考虑以后背板) 主席树还是蛮好写的,但是代码出现重复,不太好,导致调试的时候心里没底(虽然事实证明主席树部分 ...

  10. jquery 练习笔记

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...