“响应式的目标就是移动端”。这句话看似狭隘,但是狭隘是现实的产物。

一、现实是个什么玩意儿

选择移动优先还是PC优先,这样的争论是没有意义的,让哪个终端先行都无可厚非,我们会从以后的讨论中看到这个问题的无关紧要。从现实来看,无论对设计师还是前端来说,在设计稿和布局上做减法要比做加法似乎更容易,因此也更受亲睐。所以我们在真正的制作过程中往往是PC优先的。

当然,如果你的站只有PC端,那么它也可以是响应式的,毕竟PC也有不同的分辨率,何况并非每个人每次都是用全屏来浏览网页;如果你的站只有移动端,那应该更需要响应式,因为移动端各式各样的分辨率正是响应式施展身手的好地方。

现实的情况却常常是一套代码完成着跨终端,跨显示器的大事。无论是对开发者自身,还是付你工钱的老板,甚至是不甚了解技术的客户,这都是一个明显能节省成本的选择。然而,你要知道在预算和工期允许的情况下,为了针对不同平台(设备)的更好的体验,开发两套代码才是正确选择。

此外,现实的狭隘还体现在我们对“响应式”这个名词的解读上。Tim Kadlec的《响应式Web设计实践》是我读过的有关响应式的书中最好的一本。书中最后用一章的篇幅来扩展人们对响应式的认识。其中有这样的几段话:

“我们对布局的痴迷导致我们错过了很多Web提供的潜在的东西。Web是一种交互性的媒体,如果我们想要利用它的潜能,那么我们必须超越它的视觉外观来看待它。…… 如果我们用这种方法来看待响应式设计,那么它就变成了要了解提供哪些“传感器”的问题了。既然这样,讨论就不能仅仅局限在适应屏幕尺寸这个问题上了。一个真正的响应式体验要考虑下面这些因素:网络、使用环境、设备能力”。

在Tim看来,响应式是一种体验,而这种体验涉及到的不仅仅是在不同的分辨率下显示不同的布局这么简单。根据终端设备的支持能力,当前的网络状况以及设备的使用温度甚至用户的操作姿势等提供不同的体验才是真正的响应式。

现实的片面并不影响我们对响应式的喜爱以及完成它时的欣喜。

二、从“头”开始

一个响应式的网站在<head>标签里就已经开始考虑它要面临的所有环境了。所以我们来看一个普通的响应式网站的<head>标签里都有些什么:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="email=no">
    <!-- …… 其他meta,如keywords,description -->
    <title>响应式与移动端</title>

    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <!-- …… 其他样式 -->

    <script language="javascript" src="js/modernizr.custom.js"></script>
    <script language="javascript" src="js/jquery-1.8.2.min.js"></script>
    <!-- …… 其他脚本 -->
</head>

每个站的<head>都大同小异。而响应式网站的焦点就在那个viewport的<meta>上了。

viewport:我们称之为视图,其实是移动端览器上的虚拟窗口,viewport的边缘代替了浏览器的边缘,成为了窗口的边缘。默认情况下这个虚拟窗口要比实际窗口大。移动端最初这么做的目的是为了不让页面缩在一个很小的屏幕上影响阅读,而是让用户通过缩放和拖动的手势浏览网页的不同部分。这么做可以让那些没有针对移动端进行优化的网页正常浏览。那么,现在我们自己可以设置viewport的尺寸,这可能会造成更多的困惑,就是什么样的尺寸才是合适的。

width=device-width:设定viewport宽度为设备宽度,但是这里要注意,device-width并非实际的屏幕宽度像素值,而是一个被设备处理过的值,比如在iPhone上返回的是320px(你可以在这个网站查看几乎所有设备的device-width返回值)。包括Android在内的所有设备都返回在一个设备开发者认为的最理想的适合布局界面的值作为device-width。这可能是设计师和前端开发人员之间需要不断沟通的一个主要问题,因为设计稿常常是640px的,而它却要显示在320px宽的屏幕里。这是厂商在解决高分辨率屏幕显示网页的一个办法。在iPhone上,如果没有设定viewport的元信息,视图的默认宽度会是980px。

initial-scale=1:初始化页面时的缩放比例为1:1,也就是不缩放。

user-scalable=no:禁用用户缩放。首先,你要知道这可能是一种不好的体验。因为用户已经有用双指pinch,或双击放大的经验,但这种习惯似乎正在被越来越多的对移动浏览进行过优化的网站所改变。

此外,还有人为viewport设置其他属性,比如minimum-scale=1,maximum-scale=1 这么做的目的其实也是为了禁用用户缩放,但是,没必要都设置,只有一个user-scalable=1就能达到我们想要的效果。关于viewport你可以在苹果的开发者文档里了解到更多参数,如果你想更深入地了解viewport的原理请点击这里

我们简单来看下上面代码中其他标签的含义:

第2行代码指定页面编码为UTF-8;

第3行的http-equiv元信息,和设置http报头是等价的,但是此处的“X-UA-Compatible”并非标准属性。chrome=1的意义是如果IE用户安装了Chrome Frame的插件,就用这个插件来呈现页面;如果没安装那么就用IE最新的引擎呈现页面。

第5、6行在网站按常规流程来浏览时是不会起作用的,只有在网站是从主屏幕上启动时才有效,也就是说用户要主动把当前网站作为标签保存在主屏幕上,就像一个安装在本机的app一样。

第7、8行禁用电话和email的自动识别。

第12行,reset.css要关注的是文件里的内容,蓝本是Eric Meyer的,我常用的这个reset.css,我做了一些符合我个人需要的更改,包括加了默认的字体和对html和body指定了height:100%等。

第15行引入modernizr库。modernizr主要是对浏览器进行特性检测,同时修复不支持html5新元素的ie8以下的浏览器用块元素来渲染这些元素。例如,检测到当前浏览器支持video标签,那么它就会给html元素添加video的class,否则添加no-video。你看到它的文件名中有个custom,因为你能在它的官网选择只检测自己关注的特性,并生成能满足自己需求的modernizr库,没必要每个属性都去检测。

第16行是jQuery,当然你也可以引移动端常用到的zepto或者其他你会用到的框架。

三、谈谈设计稿

之前有人说,问一个前端会不会做响应式网站是错误的。他认为不是一个前端会不会做响应式的问题,而是一个设计师会不会设计一个响应式的网站。但是我认为问一个前端和问一个设计师会不会做响应式是两个情景。固然对一个响应式的网站而言,一个不利于响应式的设计稿是设计师的问题。然而,一个前端拿到一个响应式的设计稿能不能转化为响应式的页面也是一个正当的问题。

如果是好的响应式设计稿可能都不需要出手机版本,因为我们看到这个稿子凭经验就能知道哪个地方该怎么变化。可能唯一需要重新设计的部分就是头部导航了。如果客户要求看到手机版的设计那就另当别论了。

一般情况下手机版设计稿的宽度是640px。但其真正显示在手机上的时候,却不一定是640px了。在iphone上只要我们设置了viewport的width=device-width,那么它就会以320px来显示。也就是说640px的东西要缩小一半显示。因此设计师眼中的640px和我们眼中的640px是不一样的,这里常常会产生一些沟通障碍。最好的办法就是把设计稿放到手机上看看,至于用不用PS Play无关紧要,你可以用QQ或者是微信通过文件传输传到手机上看。

关于Button,也就是交互响应区域,手指在屏幕上的最小感应热区是44px。因此,建议一个按钮的高度或是链接的上下间距,在640px的设计稿上应该是大于80px的。

关于文字,首先你要知道,理想的阅读宽度介于每行45到70个字符之间。其次我们再来说一下在响应式中被广泛使用的字体单位em。

em表示字体中字母M的宽度,因此它的具体大小取决于你使用的字体。桌面浏览器的默认基准字体大小是16px,因此,对于前端当你指定body的font-size为100%时,你在不同的浏览器里看到的字体大小是相同的。但是并不是所有的设备都是以16px为基准字体的。对高分辨率的手机,16px的字体会显得很小,因此才会有viewport的device-width返回的并不是实际物理像素这样的事情。手机端我们建议设计稿的字号不要小于24px。然而很多Web设计师其实是从传统广告设计师转过来的,他们可能习惯于用pt这样的单位,那么要明白这些单位之间的换算1px = 0.75pt,这样的话12pt=16px=1em。所以手机版设计稿字号最好不要低于18pt=24px。对于前端来说em在使用时还有个要注意的地方,em是相对单位。当你用它来指定font-size时,它的取值参考父元素的font-size;当你用它来指定width、margin、padding等属性时,它的取值参考自己的font-size。

四、最后

这只是一个开篇,想写一个系列的文章,记录一些平时在响应式开发中的经验和遇到的各种坑。有些坑可能是自己挖的,也有些内容可能写得偏颇,欢迎留言指正。

本文中提及的一些点只是概括性的描述,关于流动布局,media queries以及触摸交互等响应式布局中的方方面面会在之后的文章中展开,敬请关注。

 


响应式与移动端系列:
响应式与移动端(一):万事俱备了吗?
响应式与移动端(二):了不起的百分比
响应式与移动端(三):弹力十足的图文混排
响应式与移动端(四):会变脸的媒体查询
响应式与移动端(五):交互的过渡