CS3媒体查询能检测到的特性小结

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表明隔行扫描

时间: 2024-10-24 19:25:35

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

响应式布局--媒体查询

手机浏览器会将一个标准网页缩小至与设备可视区域(标准技术术语叫做“视口”)恰好匹配.然后用户在自己感兴趣的内容区域上放大浏览 大多数情况下,根据视口大小为用户提供与之匹配的视觉效果还是优先选择 用厂商前缀时,遵循样式表的层叠特性,将无前缀的代码放在最后,这样如果该特性可用,则会覆盖之前的声明 使用CSS的@import指令在当前样式表中按条件引入其他样式表,eg:@import url("phone.css") screen and (max-width:360px);使用CSS的@i

css3 media媒体查询器用法总结 兼容ie8以下的方法

总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. http://www.360doc.com/content/14/0704/06/10734150_391862769.shtml 准备工作1:设置Meta标签 首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: 这段代码的几个参数解释: width = device-width:宽度等于当前设备的宽度 initial-scale:初始的缩放比例(默认设置为1.0) minimum-scale:允许

响应式设计:媒体查询

媒体查询可以让我们根据设备显示的特性为其设定CSS样式.可以在不改变页面内容的情况下,为特定的一些输出设变指定显示效果. 一.媒体查询语法 1.<link>标签:通过link标签的media属性为样式表指定设备类型,例如: 以下代码表示媒体类型是显示屏,媒体特性为显示屏纵向放置,此时才引入cssy样式 <link rel="stylesheet" type="text/css" media="screen and (orientation

css3 media媒体查询器用法总结

css3 media媒体查询器用法总结 Author:owenhong2014-05-30 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆的尝试了这项技术,并完美的应用在了自己的网站上了.再不更新知识你就老了.我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 准备工作1:设置Meta标签 首先我们在使用Media的时候

css3 media媒体查询器用法总结(转载)

用法及meta标签的使用及IE最新 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆的尝试了这项技术,并完美的应用在了自己的网站上了.再不更新知识你就老了.我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 准备工作1:设置Meta标签 首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: <m

css3 media媒体查询器用法总结(附js兼容方法)

css3 media媒体查询器用法总结 标签: 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆的尝试了这项技术,并完美的应用在了自己的网站上了.再不更新知识你就老了.我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 准备工作1:设置Meta标签 首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示

响应式设计的核心CSS技术Media(媒体查询器)

总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--兼容ie--><meta name="viewport" content="width=device-width, initial-scale=1"><!--得到媒体查询屏幕宽度,缩放比例--> 准备

Css3中的媒体查询@media

什么是媒体查询 媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于检测的媒体特性有:width.height和color(等).使用媒体查询可以在不改变页面内容的情况下,为特性的一些输出设备定制显示效果. 媒体查询语法 CSS3中的媒体查询:根据浏览器窗口大小的改变,页面颜色就会改变. <!DOCTYPE html> <html\> <head> <title>无标题文档</title> </head> &l

弹性盒的属性了解和媒体查询

弹性盒 flexbil box or flexbox, css3的一种布局模式,页面可以适应屏幕大小与设备确保元素保持原来布局的方式,由弹性容器flex container,弹性子元素flex item组成,设置display来实现. x轴代表主轴,从左到右,y轴代表侧轴,从上到下,主轴不一定是水平的,取决于justify-content,伸缩项目放置在伸缩容器内从主轴的起点main-start到终点main-end,主轴的尺寸main-size,伸缩项目在主轴的宽高对着主轴的方向就是主轴的尺寸