CSS3中媒体特性的示例分析

这篇文章主要介绍了CSS3中媒体特性的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

网站建设哪家好，找成都创新互联！专注于网页设计、网站建设、微信开发、重庆小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了惠东免费建站欢迎大家使用！

CSS3 媒体特性与Responsive设计

随着科学技术不断地向前发展，网页的浏览终端越来越多样化，用户可以通过宽屏电视、台式电脑、笔记本电脑、平板电脑和智能手机来访问网站。尽管无法保证一个网站在不同屏幕尺寸和不同设备上 看起来一模一样， 但至少要让你的Web页面能适配用户的终端， 让它更好地呈现在用户面前。 使用CSS3中的MediaQuery模块来让一个页面适应不同的终端（ 或屏幕尺寸）， 从而让页面有一个更好的用户体验。

媒体类型媒体类型（ Media Type） 在CSS2中是一个常见的属性， 也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式。

媒体类型引用方法在实际中媒体类型有近十种之多， 实际常用的也就那么几种。 不过媒体类型的引用方法也有多种， 常见的媒体类型引用方法主要有： 

link标签、 

xml方式、

@import 

CSS3新增的@media 

1. link方法

link方法引入媒体类型其实就是在< link>标签引用样式的时候， 通过link标签中的media属性来指定不同的媒体类型。 这种方式引入媒体类型时常跟着引用的样式文件走， 如下所示：

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

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

2. xml方式

xml方式引用媒体类型和link引入媒体类型极其相似， 也是通过media属性来指定。

3. @import方式 

@import是用来引用样式文件方法之一， 同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式，

http:/ /www.iis7.com/b/plc/ 

一种：是在样式中通过@import调用另一个样式文件； 

另一种：是在标签中的中引入， 但这种使用方法在IE 6 和 IE 7 中都不被支持， 如样式文件中调用另一个样式文件时， 就可以指定对应的媒体类型。 @import url(reset. css) screen; @import url(print. css) print; 在中的

4. @media方式

@media是CSS3中新引进的一个特性， 称为媒体查询。 在页面中也可以通过这个属性来引入媒体类型。@media引入媒体类型和@import有点类似， 也具有两种方式：

 1). 在样式文件中引用媒体类型： @media screen { 选择器{/* 你的样式代码写在这里…*/} } 

 2). 使用@media引入媒体类型的方式是在 标签中的