media type 与 media query
参考博客: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 | 手持设备 |
文档打印或打印预览模式 | |
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 是一个开源的浏览器引擎
故在CSS3中添加了前缀来区分一些浏览器的特有属性:
-ms代表IE浏览器私有属性
-webkit代表chrome、safari私有属性
-o 代表opera 浏览器
media type 与 media query的更多相关文章
- media type和media query
media type media type是CSS2的重要属性,通过它,可以针对不同的设备指定不同的样式. media type种类: 用法: <link href="styl ...
- media type与media query
media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面.media query(媒体查询)是对media ...
- media query(媒体查询)和media type(媒体类型)
media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面.media query(媒体查询)是对media ...
- angularjs - 415 (Unsupported Media Type)
angularJs+springMVC angular表单提交一个user实体时,报 angularjs - 415 (Unsupported Media Type)错误!! 原因是$http({ u ...
- WSDL2ObjC Unsupported Media Type
调用WCF服务时,出这样的异常“415 Unsupported Media Type”, Because the WCF soap is v1.1, the http header should be ...
- jersey处理支付宝异步回调通知的问题:java.lang.IllegalArgumentException: Error parsing media type 'application/x-www-form-urlencoded; text/html; charset=UTF-8'
tcpflow以流为单位分析请求内容,非常适合服务器端接口类服务查问题 这次遇到的问题跟支付宝支付后的回调post结果有关 淘宝的代码例子: public void doPost(HttpServle ...
- 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 ...
- SpringMVC 中HttpMessageConverter简介和Http请求415 Unsupported Media Type的问题
一.概述: 本文介绍且记录如何解决在SpringMVC 中遇到415 Unsupported Media Type 的问题,并且顺便介绍Spring MVC的HTTP请求信息转换器HttpMessag ...
- HTTP请求415错误 – 不支持的媒体类型(Unsupported media type)
HTTP请求415错误 – 不支持的媒体类型(Unsupported media type) 通常有以下情况: 1:检查你的 http 请求头信息,比如 因为 User-Agent 被服务器设置 拒绝 ...
随机推荐
- 在线添加磁盘,扩展LVM卷案例
一.添加硬盘,在线扫描出来 首先到虚拟机那里添加一块硬盘,注意必须是SCSI类型的硬盘. 扫描硬盘,不用重启操作系统的. echo "- - -" > /sys/class/ ...
- ASPCMS 多条件查询
1. 表单样例: <form name="topFrm" id="topFrm" action="/search.asp"> & ...
- js去除左右空格
replace方法去掉字符串的空格 //去左空格; s=s.replace(/(^\s*)/g, ""); //去右空格; s= s.replace(/(\s*$)/g, &qu ...
- PHP标记
1. xml风格 <?php echo 'ok'; ?> 推荐风格 2. 简短风格 <? echo 'ok'; ?> 限制条件:在配置文件中启用short_open_tag选项 ...
- freebsd安装和图形界面安装
通过上述的安装以后只有命令行界面,没有图形界面,如果想使用X Window就需要安装X 11和GNOME(或KDE). 1. 安装X 11(用root账户) 在确保虚拟机的CD-ROM加载了FreeB ...
- C和指针c6-1
#include<stdio.h> #include<stdlib.h> char *find_char(char const *source_str, char const ...
- ###Android 断点调试和高级调试###
转自:http://www.2cto.com/kf/201506/408358.html 有人说Android 的调试是最坑的,那我只能说是你不会用而已,我可以说Android Studio的调试是我 ...
- C# Switch is Type
常规用法: Type t = sender.GetType(); if (t == typeof(Button)) { var realObj = (Button)sender; // Do Some ...
- Php环境下载(PHPNow)安装
下载 From http://servkit.org/download 安装 解压下载包,双击setup.cmd,按照提示执行安装. 安装成功测试 原来的解压目录
- 关于memcpy和memmove的一点说明
今天看到书上降到memcpy和memmove的区别才突然发现原来两者之间有如此区别,以前只知道这两个函数是 实现同样的功能,没有接触到其不同. memcpy和memmove在MSDN的定义如下: 从两 ...