前端开发之响应式设计

可以说,因为移动互联网的兴旺,使到 Web 设计发生了很大的变化,似乎网页设计开始无法跟上设备分辨率更新的步伐,因此一种名为“响应式设计”的设计理念应运而生了。

 

一.响应式 Web 设计的理念

留意一下国内的大型网站,无一不具备移动版的网页,甚至还为不同平台的手机、平板做出不同的版本,还要顾及不同分辨率设备之间的差异,凌乱了有木有!为每一种设备各自开发一个网页版本不现实,可是要顾及某一种设备不免会牺牲另一些设备所在用户的体验,因此不妨换种思路,在设计网页时使用弹性的设计,根据用户行为以及设备环境(系统平台和屏幕尺寸等)进行相应的自动适应和调整,简单点说,就是一个网站能适应多种终端,而不是每个终端各做一个版本。

 

虽然现在很多企业对于前端的要求还是网页要在各个浏览器中表现一样,但是 Kayo 还是认为,不同的浏览器的解析方式,行为模式,处理方式本来就不一样,为什么要统一网站在不同浏览器间的表现?而响应式设计正是使到网站响应终端,虽然在不同浏览器上不是完全相同,但是却有着统一而且整齐的样式,网页的功能也会得到保证。

 

而 Kayo 也在最近设计了一款响应式主题并应用到本博,大家可以使用不同的设备浏览本博来了解响应式设计的具体效果。

 

二.响应式设计的工具

如上文所述,响应式设计很好很强大,但实现起来却不是很困难,了解了一些具体的实现方法后,响应式设计也就轻易做到。

 

1.弹性布局

弹性布局( flexible layout )主要体现在流体网格( fluid grid )和弹性图片两个方面。

 

网格(栅格)系统大家应该不陌生,很多网站都是使用网格系统进行设计的,并且前端设计师们很多都钟爱于 960px 宽度的布局,可是固定的宽度只能适应少数分辨率的设备,因此我们需要流体网格。流体网格的理念与网格系统相近,只是把网格系统中固定的宽度换为以 “%” 为单位的相对宽度,这样网页便能适应不同分辨率的设备了。

 

图片元素有自己的宽度、高度,因此一个好的响应式设计必须处理好图片,较为简单有效的办法是使用 CSS 的 max-width ,在 img 标签的父元素上使用以 “%” 为单位的宽带,img 上再使用 max-width = 100% ,这样图片便会跟随页面自适应了。

 

虽然弹性布局可以使到网页变得灵活,但是它本身也具备一个很大的缺点——在遇到极端情况(过大、过小的页面宽度)时页面便会变得很难看,因此还需要利用其他技术完善网页。

 

2.media queries(媒体查询)

在开始 media queries 之前, Kayo 首先介绍一下 viewport 属性,这是一个 webkit 内核浏览器适用的 HTML 属性,用于限制浏览器自动缩放页面的比例,因为响应式设计的网页本身会自动适应页面,因此可以先用 viewport 限制浏览器自动缩放比例,避免过度的浏览器缩放造成页面布局混乱。如下面的代码所示:

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

initial-scale 表示页面初始缩放比例,maximum-scale 则表示页面的最大缩放比例。

 

下面介绍一下 media queries ,它可以根据特定条件来调用不同的 CSS 文件,这样我们给手机、平板等分辨率较低的设备调用另外的 CSS ,对网页布局进行调整便可以实现更为完整的响应式设计了。

 

使用 media queries 可以直接在 CSS 文件内调用,假设为浏览环境宽度在480以内的手持设备, id 为 box 的元素调用一条额外的 CSS 可以这样写:

@media handheld and (max-width: 480px){
    #box{}
}

 

另外也可以在 HTML head 标签内直接调用一个 CSS 文件:

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

 

关于 media queries 的详细介绍 Kayo 会另写文章叙述,现在也可以参见 W3C 官网介绍:

 

http://www.w3.org/TR/css3-mediaqueries/

 

media queries 是 CSS3 的属性, IE8 及以下的 IE 版本并不支持,但是 Kayo 认为, media queries 主要是用于识别如手机、平板等分辨率较小的设备,这些设备在正常情况下是不会安装有 IE8 及以下版本的 IE ,因此开发者直接使用 media queries 即可,当然若是项目必须在低版本 IE 下使用 media queries ,可以调用 css3-mediaqueries-js 文件来支持,在 head 标签内加入如下语句即可。

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

 

3.显示或隐藏内容

虽然通过弹性布局和媒体查询已经能设计出具有良好适应能力的网页,但是网页中也可能会存在一些比较难处理的元素,如大型横幅,装饰的图片,或者是一些增强型的功能,这些元素并不是网页必须的,而且难于适应不同分辨率的设备,这时可以直接使用 media queries 调用额外的 CSS ( display: none )把它们隐藏。

 

4.限制最大宽度

如上文所述,处理手机、平板等较小分辨率时可以使用 media queries 调用额外的 CSS 调整布局,那么大分辨率的情况应该怎么办呢? 这里 Kayo 介绍一种简单的办法—— max-width ,使用 CSS 的 max-width 限制网页主体的最大宽度,这样页面便不会缩放过大。

 

这里需要注意一下, IE6 并不支持 max-width ,因此可以下载 minmax.js 文件加入到网页中,使 IE6 支持 max-width ,该 js 文件的调用方式如下。

<!--[if lte IE 7]>
    <script type="text/javascript" src="./js/minmax.js"></script>
<![endif]-->

 

三.调试工具

Resize Window Chrome 的一款插件,可以模拟不同分辨率的窗口大小,并支持自定义窗口大小。

 

responsivepx 直观的反映网页在不同分辨率下的表现情况,可以很方便的改变模拟分辨率的大小。

 

responsive 与 responsivepx 功能相似,并且会以比较的方式反映网页在不同分辨率下的表现。

 

screenfly 神器级应用,不但可以模拟不同的分辨率,还能模拟不同的终端设备。

 

四.其他

关于本文中涉及到的“响应式设计”、“渐进增强设计”、“viewport” 等与移动网页设计密切相关的理念欢迎参见 Kayo 之前所写的一些文章:

 

《使用 jQuery Mobile 与 HTML5 开发 Web App ——开发原则》

《使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 基础》

 

本文由 Kayo Lee 发表,本文链接:http://kayosite.com/responsive-of-web-front-end.html

评论列表

  • 评论者头像
    回复

    有软体调试吗…還是改一下然後拿手机出来看看再改一下再拿.. :-?

  • 评论者头像
    回复

    好东西,学习了!

  • 评论者头像
    回复

    主题开始感觉刺眼了,可能是我每天都来的缘故

    • 评论者头像
      回复

      @一堵墙 其实颜色已经比一开始调暗了,哈哈,还有一套更暗的颜色方案,用不用试试!

  • 评论者头像
    回复

    确实,css3中,提供了比较强大的技术支持,就是上面那个media和简单的逻辑判断,不用使用javascript来控制了。
    还有,我看标题理解错了,还以为本文是写网页交互性的实现方法的。。

  • 评论者头像
    回复

    兼容就烦了……

  • 评论者头像
    回复

    話說…一直想要問Kayo一直問到忘掉
    小小聲的問:kayo有在接案嗎?

  • 评论者头像
    回复

    请问目前有什么较好的响应式框架?也是打算做ued博客用的。目前就只了解到Bootstrap、Amaze UI、Foundation。谢谢。

回复

你正在以游客身份访问网站,请输入你的昵称和 E-mail
:wink: :roll: :oops: :mrgreen: :idea: :cry: :?: :-| :-o :-P :-? :) :( 8-O