移动端网页设计,媒体类型

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

Media Queries

  Media Queries是CSS3新增加的一个模块功能,其最大的特色就是通过CSS3来查询媒体,然后调用对应的样式。其实这个功能在CSS2.1中就有出现过,只不过那个时候此功能并不强大,我们最常见的就是给打印设备添加打印样式。随着时代的变化,这个模块功能越来越强大。

在彻底的了解Media Queries我们需要了解其中的两个重要部分,第一个是媒体类型,第二个是媒体特性。下面的内容我们简单的来了解这两个部分: 

        媒体类型

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

  在CSS2中常碰到的就是all(全部)、screen(屏幕)、print(页面打印或打印预览模式),其实媒体类型远不止这三种,W3C总共列出了10种媒体类型。如下表所示:

设备类型
All 所有设备
Braille 盲人用点字法触觉回馈设备
Embossed 盲文打印机
Handheld 便携设备
Print 打印用纸或打印预览视图
Projection 各种投影设备
Screen 电脑显示器
Speech 语音或音频合成器
Tv 电视机类型设备
Tty 使用固定密度字母栅格的媒介,比如电传打字机和终端

  其中ScreenAllPrint为最常见的三种媒体类型。

  在实际中媒体类型有近十种之多,实际之中常用的也就那么几种,不过媒体类型的引用方法也有多种,常见的有:link标签@import和CSS3新增的@media几种:  

  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" />

  @import方法

  @import可以引用样式文件,同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式,一种是在样式中通过@import调用另一个样式文件;另一种方法是在 <head></head>标签中的<style></style>中引入,但这种使用方法在IE6~7都不被支持,如样式文件中调用另一个样式文件时,就可以指定对应的媒体类型。

@importurl(reset.css) screen;
@importurl(print.css) print;

  在<head>中的<style>标签中引入媒体类型方法。

<head>
<style type="text/css">
    @importurl(style.css) all;
</style>
</head>

  @media方法

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

  (1)在样式文件中引用媒体类型:

  

@media screen {
   选择器{/*你的样式代码写在这里…*/}
}

  (2)使用@media引入媒体类型的方式是在<head>标签中的<style>中引用。

<head>
<style type="text/css">
    @media screen{
    选择器{/*你的样式代码写在这里…*/}
}
</style>
</head>

 

Media Queries使用方法

  了解完这些概念性的东西,同学们最想知道的是Media Queries要如何使用?下面我们一起来探讨其使用方法:

Media Queries能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的渲染效果。前面简单的介绍了Media Queries如何引用到项目中,但Media Queries有其自己的使用规则。具体来说,Media Queries的使用方法如下。

@media 媒体类型and (媒体特性){你的样式}

注意:使用Media Queries必须要使用“@media”开头,然后指定媒体类型(也可以称为设备类型),随后是指定媒体特性(也可以称之为设备特性)。媒体特性的书写方式和样式的书写方式非常相似,主要分为两个部分,第一个部分指的是媒体特性,第二部分为媒体特性所指定的值,而且这两个部分之间使用冒号分隔。例如:

(max-width: 480px)

  从前面表中可以得知,主要有十种媒体类型和13种媒体特性,将其组合就类似于不同的CSS集合。但与CSS属性不同的是,媒体特性是通过min/max来表示大于等于或小于做为逻辑判断,而不是使用小于(<)和大于(>)这样的符号来判断。接下来一起来看看Media Queries在实际项目中常用的方式。

  1. 最大宽度max-width

    “max-width”是媒体特性中最常用的一个特性,其意思是指媒体类型小于或等于指定的宽度时,样式生效。如:

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}

    上面表示的是:当屏幕小于或等于480px时,页面中的广告区块(.ads)都将被隐藏。

  2.最小宽度min-width

  “min-width”与“max-width”相反,指的是媒体类型大于或等于指定宽度时,样式生效。

@media screen and (min-width:900px){
    .wrapper{width: 980px;}
}

  上面表示的是:当屏幕大于或等于900px时,容器“.wrapper”的宽度为980px。

  3.多个媒体特性使用

  Media Queries可以使用关键词"and"将多个媒体特性结合在一起。也就是说,一个Media Query中可以包含0到多个表达式,表达式又可以包含0到多个关键字,以及一种媒体类型。

  当屏幕在600px~900px之间时,body的背景色渲染为“#f5f5f5”,如下所示。

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

  4.设备屏幕的输出宽度Device Width

  在智能设备上,例如iPhone、iPad等,还可以根据屏幕设备的尺寸来设置相应的样式(或者调用相应的样式文件)。同样的,对于屏幕设备同样可以使用“min/max”对应参数,如“min-device-width”或者“max-device-width”。

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

  上面的代码指的是“iphone.css”样式适用于最大设备宽度为480px,比如说iPhone上的显示,这里的“max-device-width”所指的是设备的实际分辨率,也就是指可视面积分辨率。 

  5. not关键词

  使用关键词“not”是用来排除某种制定的媒体类型,也就是用来排除符合表达式的设备。换句话说,not关键词表示对后面的表达式执行取反操作,如:

@media not print and (max-width: 1200px){样式代码}

  上面代码表示的是:样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。

  6.only关键词

  only用来指定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有:支持媒体特性的设备,正常调用样式,此时就当only不存在;表示不支持媒体特性但又支持媒体类型的设备,这样就会不读样式,因为其先会读取only而不是screen;另外不支持Media Queries的浏览器,不论是否支持only,样式都不会被采用。如

<linkrel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />

  在Media Query中如果没有明确指定Media Type,那么其默认为all,如:

<linkrel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" />

  另外在样式中,还可以使用多条语句来将同一个样式应用于不同的媒体类型和媒体特性中,指定方式如下所示。

<linkrel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />

  上面代码中style.css样式被用在宽度小于或等于480px的手持设备上,或者被用于屏幕宽度大于或等于960px的设备上。

  到目前为止,CSS3 Media Queries得到了众多浏览器支持,除了IE6-8浏览器不支持之外,在所有现代浏览器中都可以完美支持。还有一个与众不同的时,Media Queries在其他浏览器中不要像其他CSS3属性一样在不同的浏览器中添加前缀

时间: 2024-11-08 21:44:58

移动端网页设计,媒体类型的相关文章

移动端网页设计经验与心得

原文:移动端网页设计经验与心得 智能手机发展确实很迅速,像今年,我的大部分工作就都在移动端网页上. 再往前些年,看到的手机版/移动版网页,限制于浏览器与手机性能,2g网络速度等 网页设计无非是蓝.黑.白,界面单调,并且要尽可能的设计简单. 现在情况就大不相同了,软件上webkit内核浏览器大行其道,硬件突飞猛进,网速来说,4g正炒得火热. 下面就和大家分享一下我的一些移动端网页设计经验与心得. ⒈ 分辨率这应该是移动端网页最关心的问题了,因为移动设备五花八门,各种分辨率都有.要想在这些设备上都能

移动端网页设计经验与心得(转)

智能手机发展确实很迅速,像今年,我的大部分工作就都在移动端网页上. 再往前些年,看到的手机版/移动版网页,限制于浏览器与手机性能,2g网络速度等 网页设计无非是蓝.黑.白,界面单调,并且要尽可能的设计简单. 现在情况就大不相同了,软件上webkit内核浏览器大行其道,硬件突飞猛进,网速来说,4g正炒得火热. 下面就和大家分享一下我的一些移动端网页设计经验与心得. ⒈ 分辨率这应该是移动端网页最关心的问题了,因为移动设备五花八门,各种分辨率都有.要想在这些设备上都能有良好的浏览体验,得花一番功夫.

响应式网页设计

随着越来越多类型的移动设备的普及,网页设计也随之变化,响应式网页设计应用而生,目前已有有很多比较流行的框架解决此问题,无论切换任何设备,都会自动根据设备的大小进行动态变化,无需为每个量身定做不同类别的网页,大大节省了开发工作量,响应式网页设计已经成为一种趋势. 一.流行的前端(from_end)设计框架很多,大概有以下几种: 1. Bootstrap Boostrap绝对是目前最流行用得最广泛的一款框架.它是一套优美,直观并且给力的web设计工具包,可以用来开发跨浏览器兼容并且美观大气的页面.它

说说响应式网页设计

在这里我只说说我对响应式网页设计的理解,具体实现过程就先不说了~ 响应式网页设计(RWD,Responsive Web Design)这个术语,由伊桑·马科特(Ethan Marcotte)提出.他在A List Apart发表了一篇开创性的文章,将三种已有的开发技巧(弹性网格布局.弹性图片.媒体和媒体查询)整合起来,并命名为响应式网页设计. 响应式网页设计正是前端界“以人为本”的体现.Web的初衷就是为了让信息更好的传递交流,方便人们无障碍的获取信息.而网页就是人们获取.传递信息的一个接口,信

响应式网页设计【转载】

概念 响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案?Web设计应该做到根据不同设备环境自动响应及调整.当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等,它更像是一种对于设计的全新思维模式:我们应当向下兼容.移动优先. 背景 PC互联网加速向移动端迁移:2012年12月底我国网民规模达到5.64亿,互联网普及率为42.1%,手机用户占网民总数的74.5%.预计到2015年,移动互联网的数据流量将超越P

设计趋势:网页设计中的幽灵按钮

幽灵按钮——那些透明的.可点击的物体——忽然间就变得无处不在.以狂风暴雨之势席卷正网页设计领域.谁能想到,像按钮这么简单的事物,能够改变我们看待网页设计的方式? 参考:预测网页设计趋势 什么是幽灵按钮? 幽灵按钮有着最简单的扁平外形——正方形.矩形.圆形.菱形——没有填充色,只有一条淡淡的轮廓.除了外框和文字,它完完全全(或者说几乎完全)透明.(因此得名“幽灵”) 这些按钮通常比网页上传统的可点击按钮大,也被置于显要位置,例如屏幕的正中央. 各种类型的网站(包括移动APP)中都能发现幽灵按钮的身

响应式网页设计中的图片处理

响应式网页设计,是一种正在流行的网页开发思想,它是利用灵活可变的栅格系统,令网页的显示模式可以根据访问设备的屏幕尺寸规格而进行自适应.预计2015年的时候,移动端的用户数量将会从目前的8亿,增长到19亿,而这也意味着目前我们为桌面浏览器而设计的网页,将会在他们的手机和平板上呈现出非常糟糕的使用体验. 但是随着实际应用状况的改变,响应式网页设计还是会出现一系列复杂的并发症.本文余下的部分,就是详细阐述如何在响应式网页中安置和处理多媒体元素,诸如图片和视频,最终的目的是帮你做出一个靠谱的网站,能让这

移动网页设计与开发 HTML5+CSS3+JavaScript

第1章 网络平台1.1 对术语的简短说明1.2 你是谁,你需要知道些什么1.3 了解什么是HTML51.4 真正的HTML51.5 CSS3及其他1.6 浏览器支持1.7 测试,再测试,进行更多的测试总结 第2章 结构和语义2.1 HTML5的新元素2.2 网页易读性倡议的无障碍的富因特网应用程序组件(WAI-ARIA)2.3 语义标记的重要性2.4 微格式2.5 RDFa2.6 微数据2.7 数据属性2.8 Web组件:标记的未来?总结 第3章 设置响应性CSS3.1 媒体查询3.2 Java

[email&#160;protected]&amp;nbsp;&amp;nbsp;Html网页设计…

Html网页设计代码 设计第一技术其次 : ) ----------------------------------   1)贴图:<img src="图片地址"> 2)加入连接:<a href="所要连接的相关地址">写上你想写的字</a> 1)贴图: Html网页设计代码(html=how to make love)" TITLE="107@365  Html网页设计代码(html=how to make