湖南拾牛网络科技有限公司
  • 咨询热线:400-8116-098
在线客服 在线QQ 微信咨询 返回顶部
  • 联系方式
  • 公司电话:0731-88938682
  • 公司地址: 湖南省长沙市桐梓坡西路麓谷国际工业园C栋8楼

移动互联网的现状和未来
  • 来源: 拾牛网络      作者:彬彬      时间:2014-06-16
  •  

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

    全球有超过53亿手机用户(包括传统手机)

    国内3G用户超过1亿

    iPhone4手机在2010年出货量超过3000万部;

    iPhone 4S上市前3天卖掉400万部;

    Android手机每天激活超过50万部;

    iPad出货量已经超过2.5亿部;

    预计到2015年,移动互联网的数据流量将超越桌面端的流量。。。

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

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

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

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

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

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

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

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

    let the browser flow…

    怎么做?

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

    media query(媒体查询)

    因为现在主流的智能终端都是基于iOSAndroid的,而它们自带的浏览器都是基于webkit内核,所以我们可以完全使用viewport属性和media query技术实现网站的响应性:后面的initial-scale表示初始缩放,maximum-scale表示最大缩放比例,1意味着不能进行缩放。

    fluid grid(流体网格)

    很多项目都在使用网格技术(或者叫栅格),前几年960.gs很流行,但是随着屏幕分辨率的普遍提升,它已经不太适合当前需求了,于是最近几年fluid grid开始逐渐多了起来,这种技术其实也很简单,只是将格栅的单位由px变成%,用百分比来控制页面每列的宽度,从而实现宽度的自适应。

    使用流体网格的网站能够根据屏幕宽度自动调整页面中每列的宽度,从而保证页面的完整展现和基本功能。这也是一种不错的方法。

    flex box

    flex boxcss3中的新技术,它很强大,可以实现很多我们之前无法想象的自适应布局。

    有时我们希望网站能够以webapp的外观呈现给手机用户,flexbox是个不二的选择。

    比如,要实现这样的简单结构:

    虽然这里还会有点儿问题,比如主内容区域内容太多会被隐藏掉,因为android webkitiOS 5之前的mobile safari均不支持overflow:scroll属性,但是这个问题还是很好解决的,比如在里面嵌套一个子容器,用