CSS3媒体查询能检测到的特性小结
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媒体查询能检测到的特性小结的更多相关文章
- CSS3媒体查询使用小结
首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: 准备工作1:设置Meta标签 <meta name="viewport" content=& ...
- CSS3媒体查询
随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...
- Html5 @media + css3 媒体查询
css3 media媒体查询器用法总结 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错 ...
- iPhone的CSS3媒体查询
iPhone的CSS3媒体查询: 各版本的iPhone媒体查询是根据其分辨率和一些CSS3媒体查询的特性来实现媒体查询的...详见下: iPhone6的媒体查询: @media only screen ...
- CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices (包括 苹果手表 apple watch)
/* ----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */ @media only screen and (m ...
- iPhone6的CSS3媒体查询
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : po ...
- CSS3媒体查询总结
1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...
- css3 媒体查询的学习。
1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...
- 关于css3媒体查询和响应式布局
响应式设计 响应式设计可根据所显示的屏幕大小而改变, 它呈现的每个屏幕看起来并不相同.按照可用的屏幕属性,响应式设计提供了 UI 的最佳效果. 例如,如果网站布局上有一个占据 25% 的屏幕宽度的侧边 ...
随机推荐
- 配置nodejs环境
一.由于node有多种版本号,每个版本号的API肯定也有些细微的差别,在工作中有可能要经常切换node的版本号,因此可以下载nvm使其来管理node的版本号. 首先下载nvm,官网:https://g ...
- Mac eclipse 导入文件夹
貌似发现了个bug: Eclipse IDE for C/C++ Developers Version: Mars.1 Release (4.5.1)Build id: 20150924-1200 M ...
- hdu 1503 Advanced Fruits
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1503 思路:这是一道最长公共子序列的题目,当然还需要记录路径.把两个字符串的最长公共字串记录下来,在递 ...
- redis非特定类型命令
1. key查询 keys my* #获取当前数据库中符合模式的所有key exists mykey #查看key是否还存在 2. 数据库操作 redis默认一个实例的数据库是16个[db0-db15 ...
- python 线程之 threading(四)
python 线程之 threading(三) http://www.cnblogs.com/someoneHan/p/6213100.html中对Event做了简单的介绍. 但是如果线程打算一遍一遍 ...
- HTTP 头字段总结
1. Accept: 告诉WEB服务器自己接受什么介质类型,/ 表示任何类型,type/* 表示该类型下的所有子类型,type/sub-type.2. Accept-Charset: 浏览器申明自己接 ...
- Queue 的用法
对Queue 进队出队的使用不是很了解,刷题时想要直接用,所以查了一下.平时用的话用add 和remove 即可. Queue<E> 是接口. LinkedList 实现了Queue接口, ...
- BZOJ2454 : TopCoder SRM 463 RabbitPuzzle
每种状态最多只有三种后继状态:中间往左跳,中间往右跳,两边往中间跳. 如果把它们分别看成左儿子.右儿子.父亲的话,那么会得到一些二叉树. 取出起始状态和终止状态往上跳$k$步的所有状态,其他状态我们只 ...
- BZOJ4563: [Haoi2016]放棋子
Description 给你一个N*N的矩阵,每行有一个障碍,数据保证任意两个障碍不在同一行,任意两个障碍不在同一列,要求你在 这个矩阵上放N枚棋子(障碍的位置不能放棋子),要求你放N个棋子也满足每行 ...
- 淘宝弹性布局方案lib-flexible实践
2个月前,写过一篇文章<从网易与淘宝的font-size思考前端设计稿与工作流>总结过一些移动web中有关手机适配的一些思路,当时也是因为工作的关系分析了下网易跟淘宝的移动页面,最后才有那 ...