CSS3引用外部样式media type与media query的几种方法——w3cdream|前端学习-开发

'I'm W3cdream,创造',前·所·未·有
CSS3引用外部样式media type与media query的几种方法

发布作者:萧强   发布时间:2015-07-16   阅读次数:9260

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 电视

使用link和@import引用css样式表方法

我们可以通过几种方法来声明media type:

方法一


<link href="css/w3cdream.css" rel="stylesheet" type="text/css" media="screen" />


法二


<style>
@import url("w3cdream.css") screen;
</style>


当然,这几种方法各有利弊,而我们常用的是第一种和最后一种方法。



使用@media实现几种响应布局

方法1--直接也在一个css里面


@media screen and (max-width:240px){ body{font-size:medium;} }
方法2--在不同的分辨率下响应不同的css样式



<link href="css/w3cdream1.css" rel="stylesheet" type="text/css" media="screen and (max-width:480px)" />
<link  href="css/w3cdream2.css" rel="stylesheet" type="text/css" media="screen and (min-width:960px)" />
检测iPhone safari:only用法



<link media="only screen and (max-device-width: 480px)" href="w3cdream.css"> 

android手机的多分辨率问题:

/* for 240 px width screen */ 
@media only screen and (max-device-width:240px){ 
    selector{ } 
} 
/* for 360px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:360px){
    selector{ } 
} 
/* for 480 px width screen */ 
@media only screen (min-device-width:361px)and (max-device-width:480px){ 
    selector{ } 
}
还有屏幕的长宽比例不同问题解决方法 device-aspect-ratio

device-aspect-ratio可以用来适配特定屏幕长宽比的设备,这也是一个很有用的属性,比如,我们的页面想要对长宽比为4:3的普通屏幕定义一种样式,然后对于16:9和16:10的宽屏,定义另一种样式,比如自适应宽度和固定宽度:

/* 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{ } 
}

O’Reilly区分iPhone和iPad的方法


<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css">  
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css">  
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css">  
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css">  

总结

CSS 3的media query是一个很强大也很好用的工具,它为我们在不同的设备和环境下实现丰富的界面提供了一种快捷方法,虽然现在各个浏览器对它的支持还有些差异,但是大家都在改进,IE 9已经开始支持media query了。不过目前media query的最大舞台是在高端手持设备,相信随着移动互联网的快速发展,media query也会很好发挥自己的作用。


文章来源:http://www.qianduan.net/

技术总结:由W3C梦想站总结



常用昵称:萧强,全端布道者

姓名:“刘晓强”,W3CDream创始人,目前就职于易点付。专注于web前端和移动端方面知识的研究,熟练掌握photoshop和AI,喜爱Flat UI设计和Metro UI风格,熟练掌握CSS3+HTML5技术、LESS CSS和Sass CSS,还有jQuery框架方面及一些前端框架bootstrap响应式设计等。新浪微博
友荐云推荐

CSS3直通车

热点文章

新闻资讯

标签云

友情赞助