灵活性:响应设计的基础

分享于 

21分钟阅读

Web开发

  繁體

在10天内开发 Windows 8应用程序。

过去一年来,如果你还没有生活在岩石之下,你就会知道React性网页设计( ) 是这一时代的最大趋势之一。Ethan Marcotte 介绍,这个概念很简单: 使用使它的适应不同设备和解决方案的方法来开发站点。

我第一次了解这个问题时,我立刻对使用媒体查询( )的概念感到好奇,我立即将它应用到自己的自由站点。 我甚至写了一篇关于这个过程的文章: 在我强烈建议你阅读这篇文章之前,我强烈建议你使用CSS3媒体查询( ) 来对不同设备做出响应。 来吧,我等着

由于我的第一个媒体查询的努力,我很快意识到我缺少响应设计方程的关键部分: flexibility。

固定宽度挑战

自由站点是固定宽度的设计,这意味着所有宽度。margin 和 padding 设置都是以像素为单位的。 传统上,在构建网站时,这是我的首选,因为它更容易和更快捷。

但是在编写固定宽度站点的媒体查询时,那些更容易和更快速的方面会很快消失。 由于固定宽度的设计,我发现我需要非常详细和详细的媒体查询来调整。 我基本上是为每个潜在的解决方案创造一个全新的布局。 不容易,不快,不好玩。

然后我很高兴地听了先生。 Marcotte在的控制 2011中发言。 他将响应设计作为一个理论,然后就像流体网格那样dove实用性。

给流体加的弹性配方

流体布局灵活。使用浏览器窗口调整大小,因为宽度。margin 和 padding 元素( 字体和图像) 指定比例值。 当分辨率改变时,布局按比例调整。 而没有一个单一的媒体查询。

这是我的"啊哈哈啊"时刻在响应设计时。 如果我有一个基于比例值的布局,那么流体网格会做很多我需要的重提升。 我的媒体查询不必包括样式,实质上,覆盖我的所有宽度 margin 和 padding 值。

同时我有一个"哦哦哦"时刻。 流体网格需要数学来确定这些比例值。 我math数学。

幸好,伊森提供了一个实现流体网格的公式,看起来很简单( 即使对我来说):





target ÷ context = result



这个公式在页面( ) 上使用基于像素的像素宽度,并根据它的父元素( 上下文 )的像素宽度来分割它。 结果为目标元素的比例宽度。

图 1目标( 300px ) 和上下文( 960px ) 示例

例如在中,一个深灰色容器是 300像素宽,并且包含在 960-pixel 浅灰色容器中。 这里,960-pixel 容器是上下文,而 300-pixel 容器是目标。 我们的数学公式是:





300 ÷ 960 = 0.3125



0.312 5的结果需要以浏览器理解的值表示,所以你将它的转换为百分比。 这只是将小数点的两个位置转换为右边的问题,给我们 31.25个 %. 然后在CSS中,将百分比指定为元素的宽度:


1. aside {


2. background-color: #ccc;


3. float: left;


4. width: 31.25%;


5. }



把它放在测试中

虽然这个公式看起来很简单,但我知道我必须将它应用到一个真实的世界站点来了解。 幸好,我最近加入了的播客,我们重新设计网站。 当我的cohost给我她的Photoshop comps,我承诺用一个灵活的布局来开发这个网站。

比例宽度

我开始记录我所有元素的宽度。 ( 我们没有严格遵循设计中的严格网格,我将推荐。 如图1 所示,的主容器是 940像素,而 logo。主机和社交媒体链接有自己的像素宽度。

图 2主页面和 header 元素的像素宽度

为了确定 header 中元素的百分比值,我跟随了of公式,它的中的header 宽度为 940个像素。


Logo: 240 ÷ 940 =. 255319148


Hosts: 436 ÷ 940 =. 463829787


Social media links: 90 ÷ 940 =. 09574468



然后我将这些值转换成百分比,我在CSS声明中使用了这些值:


1. #logo a {


2. width: 25.5319148%; /* 240px/940px */


3. }


4. #hosts {


5. width: 46.3829787%; /* 436px/940px */


6. }


7. #push {


8. width: 9.574468%; /* 90px/940px */


9. }



请注意,对于所有这些值,我从不汇总百分比。 CSS中需要使用的准确值。 我没有一个问题,这些长百分比,任何浏览器( 包括 IE )。

还要注意,在我的每个百分比值之后,我包含了注释,显示了原始像素值( 目标) 和上下文值,这是一个。

使你的上下文正确

将宽度值转换为百分比的过程非常简单。 只要你的数学正确。 或者,只要你引用正确的上下文,就可以。

在少数情况下,我的计算没有得到正确显示的百分比。 每次出现这种情况,因为我在公式中使用了不正确的上下文值。

如图 3所示,主机信息是一个定义列表,其中包含不同宽度的元素。

图 3。<dl>的像素宽度

当我开始计算时,我使用 960-pixel header ( 请参见图 2 ) 作为上下文。 因此,对于 <dt> 宽度,我计算了:

116 ÷ 960 =. 120833333

然而,得到的百分比( 12.083 3333 % ) 并没有提供我所需的维度。 直到我意识到我的上下文是不同的,我得到正确的百分比值。

对于 <dt>,上下文实际上是父 <dl>,它是 436个像素。 这改变了我的计算,给了我所需的百分比:





116 ÷ 436 =. 266055045



如果百分比值有问题,请先检查是否有正确的上下文值。 你会节省你的头痛和时间。

比例字体

使 ee-podcast.com 灵活的下一个步骤是使用比例字体。 这基本上是与比例宽度相同的概念: 不使用固定像素值,而是使用比例值。 使用字体,选择的比例值为 ems。

要计算比例 ems,可以使用相同的公式( 目标÷上下文= 结果)。 对于字体,上下文是基本字体,通常在 body 元素上声明该字体:


1. body {


2. font: 100%/1.5 "Open Sans", Arial, Helvetica, sans-serif;


3. }



最适合现代浏览器的基线字体是 16像素,所以如果使用示例 上面,字体大小为 100%,那么字体大小的上下文是 16像素。

让我们考虑一下主机名链接的字体大小,它是 12px 中的个字符。 若要获取 em 值,请使用公式 12 ÷ 16 =. 75. 使用字体时,不需要将结果转换为百分比。 它是你在CSS中包含的确切的em 值:


1. #hosts dd {


2. font-size:. 75em; /* 12px/16px */


3. }



比例 padding 和边距

当谈到 padding 和边距时,魔法公式仍然是一样的。 让我们从主机信息( 图 3 ) 中考虑 <dt>,它的margin 为 20像素。 要获取这里 margin的百分比值,我使用与宽度相同的公式:





20 ÷ 436 =. 04587159



将小数点移动两个位置将得到我的CSS的百分比值:


1. #hosts dt {


2. margin-right: 4.5871559%; /* 20px/436px */


3. width: 26.6055045%;/* 116px/436px */


4. }



对于 padding,它是相同的。

图 4主容器的水平 padding

在图1 中显示的主要容器为 ,在右侧是 940像素,在右边和左边有 40个水平的水平 padding。 要获取 padding的比例值,我将按上下文( 436px ) 划分目标( 20px ):


1. header, footer,. wrap { 


2. padding-right: 4.25531%; /* 40px/940px */


3. padding-left: 4.25531%; /* 40px/940px */


4. width: 79.3%;


5. }



特殊例外

水平 padding的公式提供了一个特殊的例外: 上下文始终是元素本身的宽度,而不考虑父元素的宽度。

例如 header ( 图 5 ) 中的社交媒体链接都有 25个像素的padding,以允许显示图标。

用于填充的图 5上下文

获取这里 padding的比例值的计算仅引用上下文的元素( 90px )的宽度,即使父元素为 940px ( 图 2 )。


25 ÷ 90 =. 277777777



这为我的CSS padding 提供了以下百分比:





#push li a {


padding-left: 27.7777777%; /* 25px/90px */


}



垂直值

到目前为止,我们已经严格地处理了水平值,即左和右。 但是,可以使用 padding 和边距指定x 和y 轴的值,这意味着上下文更改是否为水平或者垂直值。

从到目前为止,所有计算都可以看到,水平百分比值具有父宽度( 填充为异常)的上下文。 垂直 em 值,同时具有基线字体的上下文。

如果你回想了比例字体计算,ee-podcast.com的基线字体是 16像素。 因此,如果我想指定垂直 margin 或者 padding,我将使用 16px 作为上下文。 此外,垂直值是在ems中指定的,而不是像比例字体值那样的百分比 --。

站点的<标头> 和 <页脚> 每个功能都是垂直 padding: <头> 具有 20个像素的顶部 padding,而 <页脚> 有 20个像素的底部 padding。 ( 请参见图 4.)

要确定这些 padding 属性的比例值,我使用同一个公式,并确保将 16px ( 基线字体) 指定为上下文:





20 ÷ 16 = 1.25



记住,当你处理垂直值时,你要处理的是。 这意味着公式的结果不一定要转换成百分比。 简单地列出你的CSS中的确切值:


1. header, footer,. wrap {


2. padding: 1.25em 4.25531%; /* TB- 20px/16px | RL- 40px/940px*/ 


3. width: 79.3%;


4. }



对于本例,每个轴上都有 padding 值,我使用 padding shorthand,并且修改了注释,以提供更好的开发参考:





1. padding: 1.25em 4.25531%; /* TB- 20px/16px | RL- 40px/940px*/



在这些注释中,我用TB-前缀表示了顶部和底部计算值,而右和左值以RL-前缀为前缀。 这只是我帮助记忆这些值的方法。 你使用的格式或者语法取决于你,但我强烈建议你花时间来注释你的计算。

比例高度

在我的常规开发中,我通常不指定高度值。 但是,在EE网站上的几个实例中,我必须。 例如 <header>是 148px 个高。

要获得比例高度值,我遵循与垂直值相同的方法: 上下文是基线字体。 因此,<标头> 高度的计算为:





148 ÷ 16 = 9.25



我将这个结果添加到我的CSS中,这是在ems中指定的:


1. header {


2. height: 9.25em; /*148px/16px*/


3. padding:. 4375em 4.25531% 0; /* T- 7px/16px | RL- 40px/940px */


4. }



灵活的图像

EE播客站点没有很多 inline 图像,而且只有少数 background 图像。 我还没有决定我想对网站上的图片做什么。 因此,我无法为你详细介绍我的流程。

我可以做的是共享我当前咨询的一些资源,以帮助我决定是否有灵活的图像在这个网站上。

  • 对于 background 图像,我希望了解背景大小属性是否会被使用。
  • 对于 inline 图像,max-width 方法具有公平的浏览器支持,可以与溢出一起使用。

唯一的工作流

现在我已经讨论了制作 ee-podcast.com的过程,我应该提到,我认为网站是个个人项目。 因此,为了实现灵活布局,我遵循的过程是迭代的。 我从固定宽度开始,使网站灵活缓慢,超过四个月( 当我沉浸在数学中的时候)。

对于我,这导致了唯一的工作流:

  • 我首先开发了一个固定宽度的网站,它直接从Photoshop中提取。
  • 接下来,我将所有元素的宽度值转换为百分比,但主容器的宽度除外,这仍然是固定的940像素。
  • 然后我把所有的字体大小转换成比例。
  • 接下来,我将所有垂直边距和 padding 转换成百分比,所有水平边距和 padding。
  • 最后,我将主容器的940-pixel 宽度转换为百分比。

我为什么要遵循这个过程? 主要是因为作为一个灵活的布局新手,我想首先确定我得到的核心布局( 在所有浏览器中都能出色地工作)的已知像素值。 我的逻辑是,我可以慢慢地使事情成比例和测试,知道我的基线( 固定宽度版本) 看起来。

另外,在我完成这个过程之前,网站已经上线了。 因这里,我将它分成可以管理的块,我可以在本地测试并且只在我自己保证新值完成之后发布。

我不计划继续这个工作流,因为它最终需要更多的时间( 更多时间)。 我的下一个灵活努力,我计划在第一个地方写成比例值。

但是这个工作流程给了我一个宝贵的教训: 你可以在同一布局中混合固定和比例值,而不需要任何问题。 如果你像我一样和紧急移动到比例值,你可以采取相同的宝宝步骤: 依靠已知像素值,并以比例的方式迭代替换它们。

接下来

尽管一个灵活的布局大大提升了站点大大调整和调整分辨率,ee-podcast.com 仍需要媒体查询。 然而,灵活而流畅的布局本身并不能提供响应性设计。

查看图 6。 这显示了 24-inch 桌面( 1910 x 1200分辨率) 上的完全灵活的ee-podcast.com。 一切都比较成比例,但是可以改进,以提供更舒适的查看体验,例如 logo 和主机间的间距。

图 6 1910 x 1200分辨率

同样,如图 7所示,线长在这个分辨率下无法读取。

图 7.1910 x 1200分辨率的线长度

在较小的分辨率下,会出现其他问题。 图 8 显示在 1024 x 768分辨率的iPad ( 纵向方向) 上的站点。 比例调整有帮助,但是浮点是如何下降的,并且需要解决对齐问题。 可以看到,主机信息低于 logo,而类似的问题则与谷歌日历和。 ics下载链接。

图 8 1024 x 768 portrait 方向

在 iPhone ( 纵向,320 x 480分辨率) 上,按比例调整大小会导致一个可怕的阅读体验,如图所示,

图 9 320 x 480分辨率

这些问题是媒体查询发挥作用,因为它们允许你为不同的设备和分辨率提供不同的风格。 在 main containers我已经设置了固定的像素值,在我的主容器中设置了固定像素值,这样可以使站点受到限制,直到我有空闲的时间来获得这些媒体查询。


1. header, footer,. wrap {


2.. . .


3. min-width: 940px; 


4. max-width: 940px;


5. }



媒体查询资源

当介绍媒体查询时,我现在比我写ScriptJunkie文章时更好,感谢大量新的( 给我) 工具和资源:

  • 希望通过多种解决方案查看你的媒体查询? 查看 Screenfly。 这不完美但我发现它非常有用。
  • Zoe最近将"创作高质量媒体查询。的 Essential put put"
  • 用于添加 max-width 和 min-width CSS3媒体查询的坚固的轻量级polyfill支持 IE 6至 8: Respond.js

进入正确的心态

对我来说,灵活开发播客站点的目标是响应性设计。 而向我的自由网站添加媒体查询的目标是响应性设计。 最后,我还没有完全达到我在这两个网站上的目标。 但是,我所学到的,由于两者的经验,都不能提供它自己的响应设计。

响应式设计不是流体网格。 响应设计不是媒体查询。 响应式网络设计是一种思想,一个工作流程,一个不能( 应该是'的大图片概念。 尤其是在移动的考虑设计和新流程。

更多资源

要考虑到。 更多信息以下是一些帮助你的资源:

这篇文章是由Emily写的。 Emily是standardista变体的自由网页设计师,这意味着她对语义标记和 CSS。可用性和易访问性等事情感到非常。 作为她的一部分,她在博客上写了网页设计,博客不限制,作为for的作者作者。 她也是一家用于网络标准,的客户编写者,.NET 杂志和混合在线。

about对社区建筑和知识共享非常爱爱所有的网站。 她创建并管理了新的墨西哥用户组的Webuquerque,并且是ExpressionEngine客户机的主持人。 美国 Emily Emily,Emily,Control,Voices,InterLab,,Emily,Emily,Emily。

找到 Emily:


相关文章