CSS3 媒体特性与Responsive设计
随着科学技术不断地向前发展，网页的浏览终端越来越多样化，用户可以通过宽屏电视、台式电脑、笔记本电脑、平板电脑和智能手机来访问网站。尽管无法保证一个网站在不同屏幕尺寸和不同设备上 看起来一模一样， 但至少要让你的Web页面能适配用户的终端， 让它更好地呈现在用户面前。 使用CSS3中的MediaQuery模块来让一个页面适应不同的终端（ 或屏幕尺寸）， 从而让页面有一个更好的用户体验。
媒体类型媒体类型（ Media Type） 在CSS2中是一个常见的属性， 也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式。
媒体类型引用方法在实际中媒体类型有近十种之多， 实际常用的也就那么几种。 不过媒体类型的引用方法也有多种， 常见的媒体类型引用方法主要有：
link标签、
xml方式、
@import
CSS3新增的@media

创新互联主要从事成都网站设计、网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务疏附,10余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

1. link方法
   link方法引入媒体类型其实就是在< link>标签引用样式的时候， 通过link标签中的media属性来指定不同的媒体类型。 这种方式引入媒体类型时常跟着引用的样式文件走， 如下所示：
   < link rel="stylesheet" type=" text/css" href="style.css" media="screen" />
   http:/ /www.iis7.com/a/lm/gjcpmcx/
   < link rel=" stylesheet" type=" text/css" href=" print.css" media=" print" />
2. xml方式
   xml方式引用媒体类型和link引入媒体类型极其相似， 也是通过media属性来指定。
   
3. @import方式
   @import是用来引用样式文件方法之一， 同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式，
   一种：是在样式中通过@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引入媒体类型的方式是在 标签中的