CSS3媒体特性与Responsive设计属性
CSS3 媒体特性与Responsive设计
随着科学技术不断地向前发展，网页的浏览终端越来越多样化，用户可以通过宽屏电视、台式电脑、笔记本电脑、平板电脑和智能手机来访问网站。尽管无法保证一个网站在不同屏幕尺寸和不同设备上 看起来一模一样， 但至少要让你的Web页面能适配用户的终端， 让它更好地呈现在用户面前。 使用CSS3中的MediaQuery模块来让一个页面适应不同的终端（ 或屏幕尺寸）， 从而让页面有一个更好的用户体验。
媒体类型媒体类型（ Media Type） 在CSS2中是一个常见的属性， 也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式。
媒体类型引用方法在实际中媒体类型有近十种之多， 实际常用的也就那么几种。 不过媒体类型的引用方法也有多种， 常见的媒体类型引用方法主要有：
link标签、
xml方式、
@import
CSS3新增的@media
专业领域包括成都做网站、成都网站设计、成都外贸网站建设、成都做商城网站、微信营销、系统平台开发， 与其他网站设计及系统开发公司不同，创新互联公司的整合解决方案结合了帮做网络品牌建设经验和互联网整合营销的理念，并将策略和执行紧密结合，为客户提供全网互联网整合方案。
- 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" /> - xml方式
xml方式引用媒体类型和link引入媒体类型极其相似， 也是通过media属性来指定。 - @import方式
@import是用来引用样式文件方法之一， 同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式，
一种：是在样式中通过@import调用另一个样式文件；
另一种：是在标签中的中引入， 但这种使用方法在IE 6 和 IE 7 中都不被支持， 如样式文件中调用另一个样式文件时， 就可以指定对应的媒体类型。 @import url(reset. css) screen; @import url(print. css) print; 在中的 - @media方式
@media是CSS3中新引进的一个特性， 称为媒体查询。 在页面中也可以通过这个属性来引入媒体类型。@media引入媒体类型和@import有点类似， 也具有两种方式：
1). 在样式文件中引用媒体类型： @media screen { 选择器{/ 你的样式代码写在这里…/} }
2). 使用@media引入媒体类型的方式是在 标签中的