大家好,我是IT修真院武汉分院第13期学员,一枚正直善良的web程序员。
今天给大家分享一下,修真院官网css9任务中可能会使用到的知识点:
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 type的几种使用方法:
我们可以通过几种方法来声明media type:
方法一
style media="screen">
@import url("style.css");
方法二
@media screen{
selector{rules}
}
方法三
@import url("style.css") screen;
media type的浏览器支持
IE5.5/6/7不支持在@import中使用媒体类型
Safari/firefox只支持all,screen,print三种类型(包括iphone)
Opera 完全支持
Opera mini 支持handheld,未指定则使用screen
Windows Mobile系统中的IE支持handheld,其它支持不明…
媒体查询语句结构
我们可以将上述语句称为媒体查询语句,这样也更能理解一些。从上面的例子也可以看出,媒体查询语句一般由media type+一到多个CSS属性判断组成,而多个CSS属性判断可以用关键字and连接:
@media screen and (min-width:1024px) and (max-width:1280px){
body{font-size:medium;}
}
media query的浏览器支持:
IE 9以下不支持
Firefox 3.5+(Gecko 1.9.1+)支持
Opera 9.5+完全支持
Opera mini 5支持
webkit 支持大部分属性(safari 3.0的内核版本是522,iPhone 1代的safari的内核版本是524,webkit大概从这个时候开始支持media query,但是对部分属性比如projection支持不好)
iPhone OS 3.2之前的版本不支持orientation属性,iPad和iPhone 4支持该属性。
iPhone Safari不支持orientation(iPhone 4支持)
今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~
技能树-IT修真院
IT修真院是一个免费的线上IT技术学习平台 。
每个职业以15个左右的task为初学者提供更快速高效的学习方式 ;
所有task均是从真实项目中提炼出来的技能点,
强调实战演练+自学优先+师兄辅导的学习方式,
严格的日报体系,欢乐的交流讨论学习气氛,更有无数师兄师姐帮你解疑