资讯频道 → 移动开发
阅读更多

0顶
0踩

移动开发

翻译新闻 响应设计的技巧、秘诀与最佳实践

2011-12-31 15:51 by 正式记者 WebAppTrend 评论(0) 有4057人浏览
响应设计
Web设计者间广泛流行着一个概念，即响应设计（Responsive Design）。它是一种采用流体布局和Media queries（媒介查询）技术来创建网站，使其能够适应各种尺寸大小屏幕的技术，Ethan Marcotte使用 responsive design 这一术语描述它。如果你之前从未听说过响应设计，那么你可以好好读读Marcotte的介绍文章。


简而言之，响应设计就是运用流动网格、流体布局和@meta queries使得现在（及将来）的页面能够适应不同尺寸的屏幕。无论用户是通过手机、iPad或是更大的台式显示器来访问你的网站，它们都能够恰如其分地显示。

响应设计将成为一个非常有吸引力的工具，正如Luke Wroblewski所说的，设计需要遵循移动优先原则。也就是，从小屏幕开始考虑。先理清你的网站的核心，然后一点点开始构建。从骨架开始构建能够保证网站的质量，促使开发人员关注用户所关注的问题。

你打算如何构建一个响应良好的网站呢？这个问题因人而异，但是还是存在一些通用的方法。为了帮助你开始响应设计，这里列出了一些初期设计时的最佳实践，都是从大量的Web资源中总结出来的：

  • 使用@media属性控制你的屏幕布局，但是需要记住，只有这些并不是一个真正的响应设计。
  • 使用流体布局，以便适应各种屏幕的尺寸。不要将你的设计限制在iPhone或是Android上，不要将它切割为平板电脑版本和桌面电脑版本。布局设计需要更加灵活可变，否则，如果某个新的屏幕尺寸突然变成潮流，你的网站将无法应对。
  • 根据你的网站的具体内容设定网格。封装好的网格系统可能并不适用于你的应用。这类网格的最大问题就是它们可能与你的具体内容不符。根据网站内容设计你的布局，而不是根据canvas（或是网格）。
  • 从小屏幕开始。从最小的屏幕开始设计，然后逐步在浮动元素中加入@media规则，满足更大的平板或是桌面浏览器的窗口需要。从一个窄的单列布局开始设计移动浏览器网站，然后再逐步扩大。
  • 使用Respond或是CSS3 Media Queries这类JavaScript库引导@media查询，因为在旧版本的浏览器中可能不支持直接的@media查询。从最小的屏幕开始然后逐步扩大意味着，桌面浏览器需要处理@media，确保使用Respond这类辅助工具能够支持旧版本的浏览器处理@media。
  • 不要指望Photoshop，在浏览器中构建你的组件。使用Photoshop构建动态的布局压根就没有可能性，应该在浏览器中实现。
  • 使用img { max-width: 100%; }控制图像大小。对于大规模的图像，可以考虑在小屏幕中使用Responsive Images这类工具缩小图像的大小，然后在大屏幕中使用JavaScript还原大图像。
  • 延迟加载。可能你的网站中有些辅助元素，能够优化你的网站，但并不是必须的。这类元素可以在下载完基本内容后再使用JavaScript加载这些元素。
  • 不用处处要求完美。即使做到了上述建议，你可能还是会漏掉某些使用不支持JavaScript的旧版本浏览器的用户。现在这样的用户已经越来越少了，如果他们在桌面浏览器中看到了移动版本的布局，这也并不就是世界末日。你的网站已经具备很好的可用性了。
记住，响应设计是一个非常年轻的概念，新的理念或者新工具每天都可能涌现。不要将上面的建议当做是一些硬性或是速成的规则，它只是一些引导指南罢了。

英文来源：Tips, Tricks and Best Practices for Responsive Design

0
顶
0
踩
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • JBPM一个任务提交给多个人处理（以角色分配任务）

    1.新建工作流，代码：<?xml version="1.0" encoding="...http://jbpm.org/4.4/jpdl"> <start g="37,3,48,48" name="start1"> &

  • JBPM中的任务分配 - Candidate-groups(候选组)

    当几个任务受理人有相同的任务节点时，可以划分为一个候选组(Candidate-groups)。该任务节点为多个人员，当其中之一完成后，流程就进入下一个节点。

  • jbpm4的多人会签（fork-join实现）

    会签分配给多个人，即创建了多个子任务，子任务要与主任务绑定，根据指定的会签人完成子任务，每次到完成子任务时要判断主任务的子任务个数有几个，当所有子任务都完成，主任务没有子任务时，就让主任务指向下一节点...

  • 说说在 jBPM 中，如何利用流程变量设置候选人、候选组或办理人

    候选人，多个以逗号分隔。一般设置为账号 ID。 candidate-groups 候选组，多个以逗号分隔。一般设置为部门 ID 或角色 ID。 assignee 办理人，一般设置为账号 ID。 在 *.jpdl.xml 中，形如： ... <...

  • jbpm的智能选择审批人及人工任务分配的实现思路

    在工作流中每一个人工任务的办理者被称作审批人，在原生的jbpm定义中，我们可以看到assignee和assignmentHandler这两个标签。 1 2 3 4 5 6 7 8 <taskname="review"g="96,16,127,52"> <assignmen....

  • jBPM4.4：分配任务的几种方式 在执行期间动态分配任务执行人

    进入到task，其实现在有多个task，是根据join中的multiplicity来确定的。   这些task任务安排的人员在candidate-groups（或者是candidate-users等）中定义。这个例子#{department}，就是在foreach节点中，...

  • JBPM中任务分配的几种方式

    在jbpm中关于任务的分配常见的有以下四种方式： 1、Assignee 2、Candidate-groups 3、assignmentHandler 4、Swimlanes  第一种分配方式在上一篇的博客中已经简单的应用了一下，我们可以通过assignee方式直接...

  • 转一个关于JBPM JBPM4 基础

    Execution 状态： STATE_CREATED：实例化，介于创建与启动之间 ...STATE_INACTIVE_CONCURRENT_ROOT：并发任务的父任务，（fork节点） STATE_INACTIVE_SCOPE：父任务的限定作用域 STATE_INACTIVE_J

  • 说说在 jBPM 中如何部署流程

    当业务流程被设计好之后，会有许多相关的文件散落在工程中，这些文件包括： * 定义流程的 JPDL 文件。 * 根据图形化流程定义同步生成的流程图片文件（PNG 格式）。...jbpm4 支持将流程定义及其相关资源打包一个 JA

  • 一个关于Activiti或JBPM流程的回退的讨论

    而另外，E回退时，也需要B、C的任务删除(在某种情况下也可能不删除)，现实中相当于我把任务完成后，同时提交给三个人去处理，其中一个人回退，不能把另一个任务的工作也回退回来处理。 在B点上回退，C需要销毁...

  • java jbpm工作流_jbpm工作流

    一、JBPM(java business process manager)1、工作流管理流程O--->定义工作流(使用流程设计器生成，png和xml文件，分别面向用户和系统)--->执行工作流(核心对象：流程引擎ProcessEngine)--->连接数据库(jbpm...

  • JBPM是一个强大的开源框架，用于业务流程管理和工作流管理

    JBPM是一个强大的开源框架，用于业务流程管理和工作流管理。它允许用户通过图形化工具设计和建模业务流程，并提供了一套丰富的API，使开发人员能够轻松地与流程交互。

  • JBPM

    jbpm(jboss business process managerament)是覆盖了业务管理,工作流,服务协作等领域的,一个开源的,灵活的可执行流程语言框架.既然它是一种工作流框架,我们就应该明白什么是工作流. 工作流就是业务的部分或者整体在...

  • JBPM4.4总结（一）——基础知识

    JBPM(Java Business Process Management)，业务流程管理，是Jboss（现已被Redhat收购）旗下的开源工作流引擎，是覆盖了业务流程管理，工作流，服务协议等领域的一个开源的，灵活的，易扩展的可执行流程语言框架。...

  • JBPM架构解读

    核心引擎（Core Engine）是JBPM整个项目的核心，支撑着整个工作流的复杂行为的顺利执行，它是由纯JAVA编写的，在你的项目中，它可以作为你的项目的一部分嵌入到项目中，也可以被当作一个单独的服务进行独立部署，...

  • jbpm5学习资料(人工任务)

    一个用户任务节点代表一个原子性的任务，需要通过一个人角色来执行。 虽然jBPM流程中的人工任务包含有指定用户节点，但人工任务可以简单的看做是任何类型的外部服务，需要调用时作为工作任务项的一种特殊类型的简单...

  • JBPM4中常用概念总结

    1. 流程定义(Process Definition) 流程定义是记录在xml文件中的对流程的描述，...Process Definition使用id, key和version进行标识，jBPM中可能包含多个key值相同的Process Definition，key值相同的Process Definition

  • 说说在 jBPM 工作流中如何实现【会签】功能

    单步 - 只使用一个活动来处理。 多步 - 由多个活动所组成的。 单步会签比较常见，也容易实现，主要的解决方案是在会签活动的主任务基础上，动态创建若干个子任务来实现，它的具体解决方案是： 编写专门用于会签...

  • 纵观jBPM从jBPM3到jBPM5以及Activiti

    今年最大的事件莫过于jBPM的创建者Tom ...Tom Baeyens离开的具体原因尚不清楚，但他的离开产生了两个结果：一是jBPM的下一个版本jBPM5完全放弃了jBPM4的基础代码，基于Drools Flow重头来过；二是Tom Baeyens加入A......

  • 基于纯verilogFPGA的双线性差值视频缩放 功能：利用双线性差值算法，pc端HDMI输入视频缩小或放大，然后再通过HDMI输出显示，可以任意缩放 缩放模块仅含有ddr ip，手写了 ram,f

    基于纯verilogFPGA的双线性差值视频缩放 功能：利用双线性差值算法，pc端HDMI输入视频缩小或放大，然后再通过HDMI输出显示，可以任意缩放。 缩放模块仅含有ddr ip，手写了 ram,fifo 代码，可以较为轻松地移植到其他平台。 硬件平台：易灵思 ti60f225 EDA平台：efinity

Global site tag (gtag.js) - Google Analytics