中国新时代巅峰创意服务众包平台

请登录免费注册发布任务

孙悟空威客网

关于我们

首页>知识共享>呼应式页面规划经验之谈

呼应式页面规划经验之谈

 

呼应式页面规划和移动互联网密切相关,并因移动终端的丰厚和遍及而昌盛,并且是一个颇具争议的论题,今日将和咱们讨论下。

移动互联网的现状和将来

在说到这个论题前,咱们先看下页面规划和前端开发的现状:

1.       全球有逾越53亿手机用户(包含传统手机)

2.       国内3G用户逾越1亿

3.       iPhone4手机在2010年出货量逾越3000万部;

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

5.       Android手机每天激活逾越50万部;

6.       iPad出货量现已逾越2.5亿部;

7.       估计到2015年,移动互联网的数据流量将逾越桌面端的流量。

嗯,咱们或许现已开端注意到,自个和身边的兄弟也都越来越多的用上了iPhone或许android手机或平板—— 一两年前咱们意料的移动互联网年代即将来临,如今已然完成了——咱们正处在移动互联网疾速开展的年代——现已不再是起步期间了。

那么,啥是呼应式页面规划?

呼应式页面规划是Ethan Marcotte在上一年5月份提出的一个概念,简而言之,即是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版别。这个概念能够说是是为移动互联网而生的!

或许咱们之前会注意到,有许多闻名网站都推出了iPhone或关于智能手机的专门网站,比方3g.qq.com、m.taobao.com、ipad.xxx.com等等。。。乃至前端调查之前也测验过用wordpress插件完成m.qianduan.net的移动网站。

那么疑问就来了——咱们要为每一个设备做一个独自的网站吗?来让网站在每个设备中得到相应的视觉个性和操作体会?

这样必然就要添加许多的工作量,并且许多仍是重复的。

咱们在做页面的时分,通常很着重模块化的概念,咱们需求一个合格的模块要能够“可拓展、无侵染”,它要能够用在任何地方都能够正常的显现。呼应式页面规划与此相似——网站在任何设备中都能够正常适配,而不用为每个设备独自做个子网站!

可是,商品司理和规划师能够仍是会需求网站在各个浏览器里边体现要如出一辙,乃至要像素复原——WTF!不相同的浏览器自身的功用、行动和处理方式都不相同,为啥要体现彻底相同?!

其实呼应式页面的完成很简略,都是咱们了解的技术。

media query(媒体查询)

由于如今干流的智能终端都是依据iOS和Android的,而它们自带的浏览器都是依据webkit内核,所以咱们能够彻底运用viewport特点和media query技术完成网站的呼应性:

 

后边的initial-scale表明初始缩放,maximum-scale表明最大缩放份额,1意味着不能进行缩放。

当然依托屏幕宽度来进行适配是最简略的办法,media query有许多参数能够运用比方orientation、aspect-ratio等。

其实,media query是呼应式页面规划中被用到最多的技术。

fluid grid(流体网格)

许多项目都在运用网格技术(或许叫栅格),前几年960.gs很盛行,可是跟着屏幕分辨率的遍及提高,它现已不太合适当时需求了,所以近来几年fluid grid开端逐步多了起来,这种技术其实也很简略,仅仅将格栅的单位由px成为%,用百分比来操控页面每列的宽度,然后完成宽度的自适应。

运用流体网格的网站能够依据屏幕宽度主动调整页面中每列的宽度,然后确保页面的完好展现和基本功用。这也是一种不错的办法。

flex box

flex box是css3中的新技术,它很强壮,能够完成许多咱们之前无法幻想的自适应规划。

有时咱们期望网站能够以webapp的外观出现给手机用户,flexbox是个不贰的挑选。

比方,要完成这样的简略布局:

 

它很像一个app的布局,头部和底部固定,中心高度自适应,用flexbox能够简略完成:

尽管这儿还会有点儿疑问,比方主内容区域内容太多会被躲藏掉,由于android webkit和iOS 5之前的mobile safari均不撑持overflow:scroll特点,可是这个疑问仍是极优点理的,比方在里边嵌套一个子容器,用js来给定个高度并运用定位来完成滚动条然后完好展现内容,或许直接运用iscroll等js库来完成。好消息是,iOS5中safari开端撑持overflow:scroll了。

不足之处

若是你重视网站功用之类的话,能够现已发现了一些疑问:

         加载许多不需求的资源,比方剩余的图像和款式内容

         带宽约束

         移动终端的内存和CPU约束

         图像巨细和屏幕巨细不匹配

嗯,任何一个计划都不是完满的,但也不会很蹩脚。下面咱们会说到一些可行的优化计划:

HTML5本地存储

关于撑持HTML5 appcache /manifest特性的浏览器,咱们能够将一些不常改动的静态资源存储到本地,比方css文件,css中用到的图像,以及一些js文件等:

然后将文件保存为manifest格局,并在HTML标签中引进即可:

 

这样,用户在首次拜访的时分会慢一点儿,可是后续拜访会很快,3G网络中也能为用户节约带宽。

移动设备优先

一种新的规划流程是,先为移动设备规划界面,然后将PC端作为一个拓展。

这样做的优点是清楚明了的,移动终端不会加载剩余的资源,也不会由于PC端的款式而重绘页面,一起也不会影响PC端的体现。

流体图像(fluid image)

页面中的图像有时会比手机/平板的屏幕(viewport)宽,这样会将页面容器撑开,可是移动浏览器又不能scroll,成果图像被切掉一部分,然后还会有一部分内容被躲藏掉,用户看不到。

处理这个疑问的办法很简略,将img的最大宽度设置成100%就能够了:

img{max-width:100%}

嗯,这儿的条件是,没有给img标签设置宽度和高度,不然显现会有疑问。别的不主张直接设置width=”100%”,由于会把小图拉大,含糊显现。

同理,video标签和iframe标签的宽度也能够这样做,并且最佳不要运用iframe,宽度是个疑问,功用也是一个方面吧。

CSS3 image

这个办法有些冷艳

咱们都晓得能够用::before和::after伪元素+content特点来动态显现一些内容或许做其它很帅的工作,并且在CSS 2.1中即被撑持。不过content特点在CSS 2.1中只能用于这两个伪元素中,而在CSS3中,任何元素都能够运用content特点了,这个办法即是联系css3 的attr特点和HTML自定义特点的功用:

当然,这种办法也有不足之处,比方PC端宽屏幕需求加载两个图像文件,然后咱们也要为此预备多张图像文件等。

pre标签

有的网站,比方,像前端调查这样的技术博客,会用pre来显现源代码,而浏览器对pre标签默认设置white-space:pre,这样,代码就不会换行,然后撑开子容器,形成内容被躲藏的疑问:

 

右边的文字被躲藏掉了。

处理办法很简略:

若是要兼容IE,能够加上这句,接连字母断行的疑问伤不起啊。。。。*/

当然,不仅仅pre标签,关键是white-space和word-break特点的值。

嗯,首要的技术和窍门其实就这些,咱们不会生疏。下面是一些对比有用的东西啥的:

呼应式页面规划东西与资源

国外在呼应式页面规划上现已走的很远了,现已有许多东西和资源供咱们参阅和运用:

 

CSS 结构

         320 and Up

         Mobile Boilerplate

         Golden Grid System

         Gridless

         Less Framework

         1140 CSS Grid System

         Fluid 960 Grid System

         SimpleGrid

         Skeleton

实用东西

         Respond.js,让IE6-8撑持meidia query

         Responsive Design Testing 简略而便利的测验网站的呼应性的东西,输入网址即可看到网站在不相同分辨率下的体现

         Resize My Browser 缩放浏览器东西,不过不撑持chrome和opera浏览器

         Media Query Bookmarklet 望文生义,这是一个关于media query的书签东西

         ProtoFluid 在线检查和调试网站对移动终端兼容性的东西,很赞

         ScreenFly 和ProtoFluid相似

         responsivepx 更直观的测验网站对不相同分辨率的适配性

争辩和总结

呼应式页面规划被提出以来,争辩就不断,其实核心疑问只要两个个:太多的资源请求和有限的终端撑持之间的对立、呼应式的页面规划和移动终端在用户体会和视觉个性上的区别。前者不能容忍在微小的手机/平板上经过龟速的3G/2G网络来加载一个粗笨的PC端页面,而后者纠结呼应式网站不像手机网站。

我的主意是,具体疑问具体分析,比方,强内容的网站,彻底能够测验呼应式网站,而重视觉和功用的网站,则能够测验树立一个独立的移动网站。

别的,明显,呼应式页面规划的大多数技术,是能够用在WebApp开发中的。

 

 

  1. 下一篇: 浅谈:平面设计如何配色
  2. 上一篇: 孩童使用规划——谈IPAD使用“手绘艺术家”的规划进程与经历
客服帮助