参考博客:http://www.qianduan.net/media-type-and-media-query.html

media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面。

media query(媒体查询)是对media type的一种增强,是CSS 3的重要内容之一。

随着移动互联网的发展,media query开始得到大家的重视。

media type

让我们先了解一下media type,其实这个大家会比较熟悉一点,我们通常会用到的media type会是all 和screen,然后是print,一些网站会专门通过print类型为页面的打印格式提供更友好的界面。
其实,media type有很多种:

类型 解释
all 所有设备
braille 盲文
embossed 盲文打印
handheld 手持设备
print 文档打印或打印预览模式
projection 项目演示,比如幻灯
screen 彩色电脑屏幕
speech 演讲
tty 固定字母间距的网格的媒体,比如电传打字机
tv 电视

media query支持的属性

事实上,media query支持的属性和我们常用的CSS属性是不太一样的,它们是一些特别定义的条目:

属性 MIN/MAX 描述
color 整数 yes 每种色彩的字节数
color-index 整数 yes 色彩表中的色彩数
device-aspect-ratio 整数/整数 yes 宽高比例
device-height length yes 设备屏幕的输出高度
device-width length yes 设备屏幕的输出宽度
grid 整数 no 是否是基于格栅的设备
height length yes 渲染界面的高度
monochrome 整数 yes 单色帧缓冲器中每像素字节
resolution 分辨率(“dpi/dpcm”) yes 分辨率
scan Progressive interlaced no tv媒体类型的扫描方式
width length yes 渲染界面的宽度
orientation Portrait/landscape no 横屏或竖屏

几个特别注意的地方

1、 orientation:判断设备是横屏还是竖屏时使用,Portrait判断输出设备中的页面可见区域高度大于或等于宽度(竖屏状态);landscape:除portrait值情况外,都是landscape。

eg:

 <!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>media features orientation_CSS参考手册_web前端开发参考手册系列</title>
<style>
@media not screen and (orientation:portrait){
body{color:#f00;}
}
</style>
</head>
<body>
<div class="test">当输出设备中的页面可见宽度大于高度时,本行文字显示为红色</div>
</body>
</html>

例子中 @media not screen and (orientation:portrait) 由于使用的not  故之前的竖屏状态改为了横屏状态(设备的宽度大于高度)是触发此CSS.

2、device-aspect-ratio 表示输出设备页面的尺寸比(常见的有4:3 16:9 但是这里表示用的是4/3 16/9):

eg:

 /* for 4:3 screen */
@media only screen and (device-aspect-ratio:4/3){
selector{
}
} /* for 16:9 and 16:10 screen */
@media only screen and (device-aspect-ratio:16/9) and (device-aspect-ratio:16/10){
selector{
}
}

3、webkit :WebKit 是一个开源的浏览器引擎

   现在浏览器的内核引擎,基本上是四分天下:
      Trident: IE 以Trident 作为内核引擎;
  Gecko: Firefox 是基于 Gecko 开发;
  WebKit: Safari, Google Chrome,傲游3,猎豹浏览器,百度浏览器 opera浏览器 基于 Webkit 开发。
  Presto: Opera的内核,但由于市场选择问题,主要应用在手机平台--Opera mini
  注:2013年2月Opera宣布转向WebKit引擎
  注:2013年4月Opera宣布放弃WEBKIT,跟随GOOGLE的新开发的blink引擎

故在CSS3中添加了前缀来区分一些浏览器的特有属性:

  -moz代表firefox浏览器私有属性
  -ms代表IE浏览器私有属性
  -webkit代表chrome、safari私有属性
  -o 代表opera 浏览器

media type 与 media query的更多相关文章

  1. media type和media query

    media type media type是CSS2的重要属性,通过它,可以针对不同的设备指定不同的样式.   media type种类:   用法: <link href="styl ...

  2. media type与media query

    media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面.media query(媒体查询)是对media ...

  3. media query(媒体查询)和media type(媒体类型)

    media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面.media query(媒体查询)是对media ...

  4. angularjs - 415 (Unsupported Media Type)

    angularJs+springMVC angular表单提交一个user实体时,报 angularjs - 415 (Unsupported Media Type)错误!! 原因是$http({ u ...

  5. WSDL2ObjC Unsupported Media Type

    调用WCF服务时,出这样的异常“415 Unsupported Media Type”, Because the WCF soap is v1.1, the http header should be ...

  6. jersey处理支付宝异步回调通知的问题:java.lang.IllegalArgumentException: Error parsing media type 'application/x-www-form-urlencoded; text/html; charset=UTF-8'

    tcpflow以流为单位分析请求内容,非常适合服务器端接口类服务查问题 这次遇到的问题跟支付宝支付后的回调post结果有关 淘宝的代码例子: public void doPost(HttpServle ...

  7. System.Net.WebException : The remote server returned an error: (415) UNSUPPORTED MEDIA TYPE

    I am having problems with a bit of code that accesses a restful web service. Running this code, it e ...

  8. SpringMVC 中HttpMessageConverter简介和Http请求415 Unsupported Media Type的问题

    一.概述: 本文介绍且记录如何解决在SpringMVC 中遇到415 Unsupported Media Type 的问题,并且顺便介绍Spring MVC的HTTP请求信息转换器HttpMessag ...

  9. HTTP请求415错误 – 不支持的媒体类型(Unsupported media type)

    HTTP请求415错误 – 不支持的媒体类型(Unsupported media type) 通常有以下情况: 1:检查你的 http 请求头信息,比如 因为 User-Agent 被服务器设置 拒绝 ...

随机推荐

  1. 教师投票系统(JSP+MySQL)

    display.jsp <%@ page language="java" import="java.sql.*" pageEncoding="g ...

  2. [原创]VS2010中创建动态链接库及其调用

    [原创]VS2010中创建动态链接库及其调用 一.创建动态链接库 在VS2010中创建动态链接库的步骤如下: 1)生成->编译->生成MyDll 二.调用 当调用DLL中的方法,程序编译产 ...

  3. Vim复制文件全部内容到系统剪贴板

    参考:http://vim.wikia.com/wiki/%22copy_all_to_clipboard%22_howto vim中有两个buffer为系统的剪贴板,它们为: * (primary ...

  4. Js之Navigator对象

    Window对象的navigator属性引用的是包含浏览器厂商和版本信息的Navigator对象.Navigator对象的命名是为了纪念Netscape之后NavigatorBU览器译注2,不过所有其 ...

  5. 浅谈localStorage本地存储

    在年会的抽奖程序中用到了localStorage现在拿出来总结下,localStorage的相关用法. 在年会抽奖的程序中,需要把获奖名单存储下来,年会现场没有网络,能最简单实现数据存储的方式就是,将 ...

  6. struts2的注解配置全面解析

    以前在用struts2的注解配置时总是要在web.xml中配置一个初始化参数(actionPackages),最近发现不灵了,仔细研究了下发现即使不用在web.xml中配置也能成功,但时灵时不灵的,很 ...

  7. 微信订阅号开发之token验证后,自动回复消息功能做好,发送消息没有返回

    相信很多人会跟我一样,token验证之后,发送消息给订阅号,没有消息返回. 以下,说一下我辛苦调试得到的解决办法: 首先,token验证: 自己写的token一直验证失败,找了好久,没有发现bug.实 ...

  8. 用fiddler测试ip轮询

    测试业务: 服务端根据域名配置了三台服务器ip,测试ip轮询的逻辑 测试方法: 使用fiddler配置hosts即可 1.1.1.1 第一台ip 1.1.1.1 第二台ip 1.1.1.1 第三台ip ...

  9. 巧用Graphviz和pvtrace等工具可视化C函数调用

    http://guiquanz.github.io/2012/10/15/linux_c_call_trace/

  10. CEF3 怎样禁止右键菜单

    CEF3 怎样禁止右键菜单 (2013-07-30 11:56:34)转载▼标签: cef3 右键菜单 分类: CEF3问题描述:CEF3 嵌入成功后,在网页点鼠标右键,出现英文菜单,应该怎样禁止掉呢 ...