网站建设资讯

NEWS

网站建设资讯

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引入媒体类型的方式是在 标签中的