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 被服务器设置 拒绝 ...
随机推荐
- 教师投票系统(JSP+MySQL)
display.jsp <%@ page language="java" import="java.sql.*" pageEncoding="g ...
- [原创]VS2010中创建动态链接库及其调用
[原创]VS2010中创建动态链接库及其调用 一.创建动态链接库 在VS2010中创建动态链接库的步骤如下: 1)生成->编译->生成MyDll 二.调用 当调用DLL中的方法,程序编译产 ...
- Vim复制文件全部内容到系统剪贴板
参考:http://vim.wikia.com/wiki/%22copy_all_to_clipboard%22_howto vim中有两个buffer为系统的剪贴板,它们为: * (primary ...
- Js之Navigator对象
Window对象的navigator属性引用的是包含浏览器厂商和版本信息的Navigator对象.Navigator对象的命名是为了纪念Netscape之后NavigatorBU览器译注2,不过所有其 ...
- 浅谈localStorage本地存储
在年会的抽奖程序中用到了localStorage现在拿出来总结下,localStorage的相关用法. 在年会抽奖的程序中,需要把获奖名单存储下来,年会现场没有网络,能最简单实现数据存储的方式就是,将 ...
- struts2的注解配置全面解析
以前在用struts2的注解配置时总是要在web.xml中配置一个初始化参数(actionPackages),最近发现不灵了,仔细研究了下发现即使不用在web.xml中配置也能成功,但时灵时不灵的,很 ...
- 微信订阅号开发之token验证后,自动回复消息功能做好,发送消息没有返回
相信很多人会跟我一样,token验证之后,发送消息给订阅号,没有消息返回. 以下,说一下我辛苦调试得到的解决办法: 首先,token验证: 自己写的token一直验证失败,找了好久,没有发现bug.实 ...
- 用fiddler测试ip轮询
测试业务: 服务端根据域名配置了三台服务器ip,测试ip轮询的逻辑 测试方法: 使用fiddler配置hosts即可 1.1.1.1 第一台ip 1.1.1.1 第二台ip 1.1.1.1 第三台ip ...
- 巧用Graphviz和pvtrace等工具可视化C函数调用
http://guiquanz.github.io/2012/10/15/linux_c_call_trace/
- CEF3 怎样禁止右键菜单
CEF3 怎样禁止右键菜单 (2013-07-30 11:56:34)转载▼标签: cef3 右键菜单 分类: CEF3问题描述:CEF3 嵌入成功后,在网页点鼠标右键,出现英文菜单,应该怎样禁止掉呢 ...