登录模块加载中...
会员投稿 投稿指南 今天是:
打印本页 | 关闭窗口 | 双击滚屏 您的位置首页>>网页制作学习园地>>网页制作>>制作问题解答>>响应式网页设计和移动互联网
响应式网页设计和移动互联网
来源: ‖ 作者: ‖ 点击: ‖ 时间:11-12-27 10:50:31 ‖ 【 】‖ 我要投稿
个话题最近很火爆,我也一直在关注,响应式网页设计和移动互联网密切相关,并因移动终端的丰富和普及而兴盛,并且是一个颇具争议的话题,我今天将和大家探讨下。

上周写了个简单的ppt在组内大概介绍了下,感兴趣的话可以先看下这个PPT

移动互联网的现状和未来

在说到这个话题前,我们先看下网页设计和前端开发的现状:

  1. 全球有超过53亿手机用户(包括传统手机)
  2. 国内3G用户超过1亿
  3. iPhone4手机在2010年出货量超过3000万部;
  4. iPhone 4S上市前3天卖掉400万部;
  5. Android手机每天激活超过50万部;
  6. iPad出货量已经超过2.5亿部;
  7. 预计到2015年,移动互联网的数据流量将超越桌面端的流量
  8. 。。。

嗯,大家也许已经开始注意到,自己和身边的朋友也都越来越多的用上了iPhone或者android手机或平板——一两年前我们预料的移动互联网时代即将来临,现在已然实现了——我们正处在移动互联网快速发展的时代——已经不再是起步阶段了。

那么,什么是响应式网页设计?

响应式网页设计是Ethan Marcotte在去年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念可以说是是为移动互联网而生的!

或许大家之前会注意到,有很多知名网站都推出了iPhone或针对只能手机的专门网站,比如3g.qq.com、m.taobao.com、ipad.xxx.com等等。。。甚至前端观察之前也尝试过用wordpress插件实现m.qianduan.net的移动网站。

那么问题就来了——我们要为每一个设备做一个单独的网站吗?来让网站在每个设备中得到相应的视觉风格和操作体验?

这样势必就要增加很多的工作量,而且很多还是重复的。

我们在做页面的时候,一般很强调模块化的概念,我们要求一个合格的模块要能够“可扩展、无侵染”,它要能够用在任何地方都能够正常的显示。响应式网页设计与此类似——网站在任何设备中都能够正常适配,而不用为每个设备单独做个子网站!

但是,产品经理和设计师可能还是会要求网站在各个浏览器里面表现要一模一样,甚至要像素还原——WTF!不同的浏览器本身的功能、行为和处理方式都不一样,为什么要表现完全一样?!

let the browser flow…

怎么做?

其实响应式网页的实现很简单,都是大家熟悉的技术。

media query(媒体查询)

因为现在主流的智能终端都是基于iOS和Android的,而它们自带的浏览器都是基于webkit内核,所以我们可以完全使用viewport属性和media query技术实现网站的响应性:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

后面的initial-scale表示初始缩放,maximum-scale表示最大缩放比例,1意味着不能进行缩放。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* for 240 px width screen */
@media only screen and (max-device-width:240px){
    selector{
    }
}
 
/* for 360px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:360px){
    selector{
    }
}
 
/* for 480 px width screen */
@media only screen (min-device-width:361px)and (max-device-width:480px){
    selector{
    }
}

当然依靠屏幕宽度来进行适配是最简单的方法,media query有很多参数可以使用比如orientation、aspect-ratio等,不太了解的可以查看这篇详细的介绍

其实,media query是响应式网页设计中被用到最多的技术。

fluid grid(流体网格)

很多项目都在使用网格技术(或者叫栅格),前几年960.gs很流行,但是随着屏幕分辨率的普遍提升,它已经不太适合当前需求了,于是最近几年fluid grid开始逐渐多了起来,这

|<< << < 1 2 > >> >>|
加入收藏:  加入收藏夹  | 发送给好友:  发送给好友
责任编辑:admin
  • 上一篇:商旅网首页的标签切换
  • 下一篇:无
  • 相关文章列表
    请文明参与讨论,禁止漫骂攻击。  
    网友评论