参考博客: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. 在线添加磁盘,扩展LVM卷案例

    一.添加硬盘,在线扫描出来 首先到虚拟机那里添加一块硬盘,注意必须是SCSI类型的硬盘. 扫描硬盘,不用重启操作系统的. echo "- - -" > /sys/class/ ...

  2. ASPCMS 多条件查询

    1. 表单样例: <form name="topFrm" id="topFrm" action="/search.asp"> & ...

  3. js去除左右空格

     replace方法去掉字符串的空格 //去左空格; s=s.replace(/(^\s*)/g, ""); //去右空格; s= s.replace(/(\s*$)/g, &qu ...

  4. PHP标记

    1. xml风格 <?php echo 'ok'; ?> 推荐风格 2. 简短风格 <? echo 'ok'; ?> 限制条件:在配置文件中启用short_open_tag选项 ...

  5. freebsd安装和图形界面安装

    通过上述的安装以后只有命令行界面,没有图形界面,如果想使用X Window就需要安装X 11和GNOME(或KDE). 1. 安装X 11(用root账户) 在确保虚拟机的CD-ROM加载了FreeB ...

  6. C和指针c6-1

    #include<stdio.h> #include<stdlib.h> char *find_char(char const *source_str, char const ...

  7. ###Android 断点调试和高级调试###

    转自:http://www.2cto.com/kf/201506/408358.html 有人说Android 的调试是最坑的,那我只能说是你不会用而已,我可以说Android Studio的调试是我 ...

  8. C# Switch is Type

    常规用法: Type t = sender.GetType(); if (t == typeof(Button)) { var realObj = (Button)sender; // Do Some ...

  9. Php环境下载(PHPNow)安装

    下载 From http://servkit.org/download 安装 解压下载包,双击setup.cmd,按照提示执行安装. 安装成功测试 原来的解压目录

  10. 关于memcpy和memmove的一点说明

    今天看到书上降到memcpy和memmove的区别才突然发现原来两者之间有如此区别,以前只知道这两个函数是 实现同样的功能,没有接触到其不同. memcpy和memmove在MSDN的定义如下: 从两 ...