资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

CSS3媒体特性与Responsive设计属性-创新互联

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