CSS3 媒体记
css3 媒体
Media Type 媒体类型
媒体类型是CSS2中一个非常有用的属性。通过媒体类型可以对不同的设备指定不同的样式。
W3C共列出十种媒体类型,如表:
值 | 设备类型 |
---|---|
all | 所有设备 |
Braille | 盲人用点字法触觉回馈设备 |
Embossed | 盲文打字机 |
Handheld | 便携设备 |
打印用纸或打印预览视图 | |
Projection | 各种投影设备 |
Screen | 电脑显示器 |
Speech | 语音或音频合成器 |
TV | 电视机类型设备 |
Tty | 使用固定密度字母栅格的媒介,比如电传打字机和终端 |
其中screen,all,print为最常见的三种媒体类型。
媒体类型的引用方法
link方法:在<link>标签引用样式的时候引入媒体类型,通过media属性指定不同的媒体类型。
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
xml方法:与link引入媒体类型类似,也是通过media属性来指定。
<?xml-stylesheet type="text/css" media="screen" href="style.css">
@import方法
:@import
是用来引用样式文件的方法之一,同样可以用来引用类型。@import
引入媒体类型主要有两种方式。一种是在样式文件中通过
@import
调用另一个文件;@import url(style.css) screen;
另一种是在标签<style>中引入。
<style>
@import url(style.css) screen;
</style>
@media方法
:@media
是CSS3中新引进的特性,称为媒体查询。在页面中可以通过这个属性来引入媒体类型。与@import
类似,也有两种类型。一种是在样式文件中通过
@media
引用媒体类型;@media screen{
选择器{/*样式*/}
}
另一种是在标签<style>中引入。
<style>
@media screen{
选择器{/*样式*/}
}
</style>
以上四种方法都可以引用媒体类型,推荐使用第一种与第四种。
Media Query媒体特性
媒体特性是CSS3对媒体类型的增强版。
W3C共列出13种CSS3中常用的特性,如表:
属性 | 值 | 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/landsscape | No | 横屏或竖屏 |
Media Query使用方法
@media 媒体类型 and (媒体特性){/*样式*/}
使用Media Query时必须要使用@media
开头,然后指定媒体类型,随后是指定媒体特性。
最大宽度max-width
max-width是媒体特性中最常用的一个特性,意思是指媒体类型小于或等于指定的宽度时,样式生效。
@media screen and (max-width:480px){
div{
width:400px;
}
}
意思是当屏幕小于或等于480px时,div的宽度被重置为400px。
最小宽度min-width
min-width与max-width相反,即媒体类型大于或等于指定宽度时,样式生效。
@media screen and (min-width:900px){
div{width:900px;}
}
当最小宽度等于或大于900px时,div的宽度重置为900px
多个媒体特性使用
Media Query可以使用关键词“and”将多个媒体特性结合在一起。
@media screen and (min-width:400px) and (max-width:600px){
div{
background:red;
}
}
当屏幕宽度在400px~600px时,div的背景色变为红色。
设备屏幕的输出宽度Device width
还可以根据屏幕尺寸设置相应的样式
<link rel="stylesheet" media="screen and (max-device-width:500px)" href="style.css" />
样式适用于最大宽度为500px,这里的max-device-width所指的是实际分辨率,也就是指可视面积分辨率。
not关键词
关键词not用来排除某种制定的媒体类型,也就是说对后面的表达式执行取反操作。
@media not print and (max-widht:1200px){/*样式*/}
样式代码将被使用在除了打印设备和屏幕宽度小于1200px的所有设备。
only关键词
only用来指定某种特定的媒体类型,可以排除不支持媒体查询(Media Query)的浏览器。only很多时候是用来对不支持Media query却支持Media Type的设备隐藏样式表。因此支持媒体特性的设备正常调用样式,此时就当only不存在;不支持媒体特性但支持媒体类型的设备,就不会读取样式,因为先读取的是only而不是screen;不支持Media Query的浏览器,不论是否支持only,样式都不会被采用。
<link rel="stylesheet" media="only screen and (max-device-width:1200px)" href="style.css">
CSS3 媒体特性完。
CSS3 媒体记的更多相关文章
- CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices (包括 苹果手表 apple watch)
/* ----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */ @media only screen and (m ...
- iPhone的CSS3媒体查询
iPhone的CSS3媒体查询: 各版本的iPhone媒体查询是根据其分辨率和一些CSS3媒体查询的特性来实现媒体查询的...详见下: iPhone6的媒体查询: @media only screen ...
- iPhone6的CSS3媒体查询
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : po ...
- CSS3媒体查询使用小结
首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: 准备工作1:设置Meta标签 <meta name="viewport" content=& ...
- CSS3媒体查询
随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...
- 怎样使用CSS3媒体查询(Media Queries)制作响应式网站
自本周开始博主将开始同大家一起研究响应式web设计,CSS3 Media Queries是入门,本周更新,博主将给大家分享media queries的一些常用的用法及注意事项. Media Queri ...
- CSS3媒体查询总结
1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...
- css3 媒体查询的学习。
1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...
- Html5 @media + css3 媒体查询
css3 media媒体查询器用法总结 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错 ...
随机推荐
- 转载IEnumerable与IEnumerator区别
public interface IEnumerable { IEnumerator GetEnumerator(); } public interface IEnumerator { ...
- Spring Data JPA教程, 第七部分: Pagination(未翻译)
The previous part of my Spring Data JPA tutorialdescribed how you can sort query results with Spring ...
- API基础开发学习网址
http://www.cnblogs.com/shanyou/category/307401.html http://www.cnblogs.com/beginor/archive/2012/03/1 ...
- 使用ASP.NET 构建 Web 应用程序快速入门-8小时的免费培训视频
- Scott Hanselman的中文博客[转载] [原文发表地址] Building Web Apps with ASP.NET Jump Start - 8 Hours of FREE Trai ...
- ckeditor异常问题
上传图片时点击上传按钮时,图片不能上传,有两种可能 1:采用ssh框架 , 上传图片对应的struts.xml没有配置<constant name="struts.action.exc ...
- 从零开始学android开发-通过WebService获取今日天气情况
因为本身是在搞.NET方面的东东,现在在学习Android,所以想实现Android通过WebService接口来获取数据,网上很多例子还有有问题的.参考:Android 通过WebService进行 ...
- Ogre分层渲染 (转)
Ogre分层渲染 转载请注明出处!http://www.cnblogs.com/pulas 在超大的场景中,如果既想看到近处的物体,又想看到很远的物体,则必须把相机的远近裁剪面距离设得很大.远近裁剪面 ...
- HDU 5235 Friends (2015 Multi-University Training Contest 2 搜索+剪枝)
题目链接:pid=5305">传送门 题意: n个人给定m个关系.每一个关系为x,y表示x,y是朋友.可是可能是online friends,也可能是offline friends. ...
- Proteus仿真_01、 8086 IO译码仿真
最近在学习一些微机原理与接口技术方面的知识. 参考书籍<微机原理与接口技术---基于8086Proteus仿真> 顾晖 梁惺彦 编著 实验一.利用8086 芯片来实现对I/O设备的读取和控 ...
- cocos2dx jsoncpp
jsoncpp下载 http://sourceforge.net/projects/jsoncpp/ 下载解压后用到的是include\json下面的头文件跟src\lib_json下的文件. 导入头 ...