流体式布局与响应式布局_将固定像素设计转换为流体比例布局

流体式布局与响应式布局

Responsive web design has been a prime necessity for every enterprise ever since Google announced that responsive, mobile-friendly websites will see a hike in their search engine rank in 2015.

自Google宣布响应式，移动友好型网站将在2015年提高搜索引擎排名以来，响应式网页设计一直是每个企业的首要要求。

Fluid web designs, if implemented with precision and proper technique, can adjust themselves to be seen correctly on large screens, small screens, and even tiny PDA screens. Fluid grids enable you to position elements on your page and deploy them out in a visually appealing way, following a specific hierarchy. In this article, we will learn how to transform a rigid design into a fluid proportional layout effectively.

流畅的网页设计，如果以精确和适当的技术实施，则可以调整自己，使其在大屏幕，小屏幕甚至微型PDA屏幕上都能正确显示。 流体网格使您可以在页面上放置元素，并按照特定的层次结构以视觉上吸引人的方式部署它们。 在本文中，我们将学习如何将刚性设计有效地转换为流体比例布局。

This article is an excerpt from the book Responsive-Web-Design with HTML5 and CSS, Third Edition by Ben Frain, a completely updated version of one of the biggest best selling and most comprehensive books on the latest HTML5 and CSS tools and techniques for responsive web design.

本文摘自 Ben Frain 撰写的《 使用HTML5和CSS进行响应式网络设计》第三版 ， 这是有关 响应式 HTML5和CSS工具和技术的最畅销，最全面的书籍之一的完整更新版本。网页设计。

Graphic composites, or “comps,” as they are often called, made in a program like Photoshop, Illustrator, or Sketch all have fixed pixel dimensions. At some point, the designs need to be converted to proportional dimensions when recreating the design as a fluid layout for the browser.

在诸如Photoshop，Illustrator或Sketch之类的程序中制作的通常称为“图形合成”或“合成”的像素尺寸都是固定的。 在某些时候，将设计重新创建为浏览器的流畅布局时，需要将设计转换为比例尺寸。

There is a beautifully simple formula for making this conversion that the father of responsive web design, Ethan Marcotte, set down in his 2009 article, Fluid Grids (http://alistapart.com/article/FLUIDGRIDS):

响应式网页设计之父Ethan Marcotte在其2009年的文章Fluid Grids( http://alistapart.com/article/FLUIDGRIDS )中设定了一个漂亮的简单转换公式：

target / context = result

目标/环境=结果

Put another way, divide the units of the thing you want by the thing it lives in. Let’s put that into practice. Understanding it will enable you to convert any fixed dimension layouts into responsive/fluid equivalents.

换句话说，将所需事物的单位除以其所生活的事物。让我们将其付诸实践。 了解它可以使您将任何固定尺寸的布局转换为响应/流体等效项。

Consider a very basic page layout intended for desktop. In an ideal world, we would always be moving to a desktop layout from a smaller screen layout; however, for the sake of illustrating the proportions, we will look at the two situations back to front.

考虑用于桌面的非常基本的页面布局。 在理想的世界中，我们总是会从较小的屏幕布局转向桌面布局。 但是，为了说明比例，我们将重新审视这两种情况。

Here’s an image of the layout:

这是布局的图像：

A basic “desktop” layout 基本的“桌面”布局

The layout is 960px wide. Both the header and footer are the full widths of the layout. The left-hand area is 200px wide, and the right-hand area is 100px wide. That leaves 660px for the main content area. Our job is to convert this fixed-width design into a fluid layout that retains its proportions as it is resized. For our first task, we need to convert the middle and side sections into proportional dimensions.

布局为960px宽。 页眉和页脚均为布局的整个宽度。 左侧区域为200px宽，右侧区域为100px宽。 剩下的660px用于主要内容区域。 我们的工作是将这种固定宽度的设计转换为流畅的布局，并在调整大小时保留其比例。 对于我们的第一个任务，我们需要将中间部分和侧面部分转换为比例尺寸。

We will begin by converting the left-hand side. The left-hand side is 200 units wide. This value is our target value. We will divide that target size by 960 units, our context, and we have a result: .208333333. Now, whenever we get our result with this formula, we need to shift the decimal point two points to the right. That gives us a value that is the target value described as a percentage of its parent. In this case, the left-hand section is 20.8333333% of its parent.

我们将从转换左侧开始。 左侧为200个单位宽。 该值是我们的目标值。 我们将根据目标大小将该目标大小除以960个单位，结果为.208333333。 现在，只要使用此公式获得结果，就需要将小数点向右移动两点。 这给了我们一个值，该值是描述为其父级百分比的目标值。 在这种情况下，左侧部分是其父级的20.8333333％。

Let’s practice the formula again in the middle section. Our target value is 660. Divide that by our context of 960 and we get .6875. Move the decimal two points to the right and we have 68.75%.

让我们在中间部分再次练习公式。 我们的目标值为660。将其除以960的上下文，得出.6875。 将小数点后两位移到右边，我们有68.75％。

Finally, let’s look at the right-hand section. Our target is 100. We divide that by the context of 960 and we get .104166667. Move the decimal point and we have a value of 10.4166667%.

最后，让我们看一下右侧部分。 我们的目标是100。我们将其除以960，则得到.104166667。 移动小数点，我们得到一个值10.4166667％。

That’s as difficult as it gets. Say it with me: target, divided by context, equals result.

那样困难。 跟我说：目标，除以上下文，等于结果。

You can use values with long decimal values with no issues in the CSS. Or, if you would rather see more palatable numbers in your code, rounding them to two decimal points will work just as well for the browser.

您可以使用带有长十进制值的值，而CSS中没有问题。 或者，如果您希望在代码中看到更多可口的数字，则将它们四舍五入到小数点后两位对浏览器同样适用。

To prove the point, let’s quickly build that basic layout as blocks in the browser. To make it easier to follow along, I have added a class to the various elements that describe which piece of the “comp” they are referring to. It’s not a good idea to name things based on their location ordinarily. The location can change, especially with a responsive design. In short, do as I say and not as I do here! You can view the layout as example_04–01 in https://github.com/PacktPublishing/Responsive-Web-Design-with-HTML5-and-CSS-Third-Edition.

为了证明这一点，让我们快速将基本布局构建为浏览器中的块。 为了使后续操作更容易，我在各种元素中添加了一个类来描述它们所指的“ comp”部分。 通常，根据事物的位置来命名事物不是一个好主意。 位置可能会更改，尤其是采用响应式设计时。 简而言之，按照我说的去做，不要像我在这里做的那样！ 您可以在https://github.com/PacktPublishing/Responsive-Web-Design-with-HTML5-and-CSS-Third-Edition中以example_04-01的形式查看布局。

Here’s the HTML:

这是HTML：

<div class=”Wrap”> 
  <header class=”Header”></header> 
  <div class=”WrapMiddle”> 
    <aside class=”Left”></aside> 
    <main class=”Middle”></main> 
    <aside class=”Right”></aside> 
  </div> 
  <footer class=”Footer”></footer> 
</div>

And here is the CSS:

这是CSS：

html, 
body { 
  margin: 0; 
  padding: 0; 
} 
 
.Wrap { 
  max-width: 1400px; 
  margin: 0 auto; 
} 
 
.Header { 
  width: 100%; 
  height: 130px; 
  background-color: #038c5a; 
} 
 
.WrapMiddle { 
  width: 100%; 
  font-size: 0; 
} 
 
.Left { 
  height: 625px; 
  width: 20.83%; 
  background-color: #03a66a; 
  display: inline-block; 
} 
 
.Middle { 
  height: 625px; 
  width: 68.75%; 
  background-color: #bbbf90; 
  display: inline-block; 
} 
 
.Right { 
  height: 625px; 
  width: 10.41%; 
  background-color: #03a66a; 
  display: inline-block; 
} 
 
.Footer { 
  height: 200px; 
  width: 100%; 
  background-color: #025059; 
}

If you open the example code in a browser and resize the page, you will see the dimensions of the .Left, .Middle, and .Right sections remain proportional to one another. You can also play around with the max-width of the .Wrap values to make the bounding dimensions for the layout bigger or smaller (in the example, it’s set to 1400px).

如果在浏览器中打开示例代码并调整页面大小，您将看到.Left ， .Middle和.Right部分的尺寸保持成比例。 您还可以使用.Wrap值的最大宽度来增大或减小布局的边界尺寸(在示例中，其设置为1400px)。

Now, let’s consider how we would have the same content on a smaller screen that flexes to a point and then changes to the layout we have already seen. You can view the final code of this layout in example_04–02 in https://github.com/PacktPublishing/Responsive-Web-Design-with-HTML5-and-CSS-Third-Edition.

现在，让我们考虑一下如何在较小的屏幕上具有相同的内容，该内容可以弯曲到一个点，然后更改为我们已经看到的布局。 您可以在https://github.com/PacktPublishing/Responsive-Web-Design-with-HTML5-and-CSS-Third-Edition的 example_04-02中查看此布局的最终​​代码。

The idea is that, for smaller screens, we will have a single “tube” of content. The left-hand area will only be viewable as an “off-canvas” area; typically, an area for a menu or similar, which sits off the viewable screen area and slides in when a menu button is clicked on. The main content sits below the header, then the right-hand section below that, and finally the footer area. In our example, we can expose the left-hand menu area by clicking anywhere on the header. Typically, when making this kind of design pattern for real, a menu button would be used to activate the side menu.

这个想法是，对于较小的屏幕，我们将只有一个“管”的内容。 左侧区域只能作为“画布外”区域查看； 通常是菜单区域或类似区域，它位于可见的屏幕区域之外，并在单击菜单按钮时滑入。 主要内容位于页眉下方，然后是该页眉下方的右侧部分，最后是页脚区域。 在我们的示例中，我们可以通过单击标题上的任意位置来显示左侧菜单区域。 通常，当使这种设计模式成为现实时，将使用菜单按钮来激活侧面菜单。

As you would expect, when combining this with our newly mastered media query skills, we can adjust the viewport and the design just “responds” — effortlessly moving from one layout to another and stretching between the two. I’m not going to list out all of the CSS here, it’s all in example_04–02 in https://github.com/PacktPublishing/Responsive-Web-Design-with-HTML5-and-CSS-Third-Edition.

如您所料，将其与我们新掌握的媒体查询技能结合使用时，我们可以调整视口和设计，从而“响应” —轻松地从一种布局移动到另一种布局，并在两者之间进行扩展。 我不会在这里列出所有CSS，全部在https://github.com/PacktPublishing/Responsive-Web-Design-with-HTML5-and-CSS-Third-Edition中的example_04-02中。

However, here’s an example — the left-hand section:

但是，这是一个示例-左侧部分：

.Left { 
  height: 625px; 
  background-color: #03a66a; 
  display: inline-block; 
  position: absolute; 
  left: -200px; 
  width: 200px; 
  font-size: 0.9rem; 
  transition: transform 0.3s; 
} 
 @media (min-width: 40rem) { 
  .Left { 
    width: 20.83%; 
    left: 0; 
    position: relative; 
  } 
} 

You can see that, up first, without a media query, is the small screen layout. Then, at larger screen sizes, the width becomes proportional, the positioning relative, and the left value is set to zero. We don’t need to rewrite properties such as height, display, or background-color as we aren’t changing them.

您可以看到，首先，无需进行媒体查询，便是小屏幕布局。 然后，在较大的屏幕尺寸下，宽度变为比例，相对位置，并将左值设置为零。 我们不需要重写高度，显示或背景颜色之类的属性，因为我们无需对其进行更改。

This is progress. We have combined two of the core responsive web design techniques we have covered; converting fixed dimensions to proportions and using media queries to target CSS rules relevant to the viewport size.

这是进步。 我们结合了我们涵盖的两种核心响应式Web设计技术； 将固定尺寸转换为比例，并使用媒体查询来定位与视口大小相关CSS规则。

In a real project, we should be making some provision if JavaScript isn’t available and we need to view the content of the menu.

在一个真实的项目中，如果JavaScript不可用，我们应该做一些准备，我们需要查看菜单的内容。

We have now covered the essentials of fluid design. To surmise, where needed, make the dimensions of elements proportional rather than fixed. This way, designs adapt to the size of their container. And you now have the simple target/context = result formula to make the necessary calculations.

现在，我们已经涵盖了流体设计的要点。 要进行推测，请根据需要使元素的尺寸成比例而不是固定。 这样，设计便可以适应其容器的大小。 现在，您有了简单的target / context = result公式来进行必要的计算。

In this article, we looked at a general example that showed how fixed dimension layouts can be turned into responsive/fluid equivalents using media queries. For more details on responsive web designing using modern CSS3 features such as flexbox and grid, I recommend giving Responsive-Web-Design with HTML5 and CSS by Ben Frain a read.

在本文中，我们看了一个一般示例，该示例显示了如何使用媒体查询将固定尺寸的布局转换为响应/流体等效项。 有关使用现代CSS3功能(例如flexbox和grid)的自适应Web设计的更多详细信息，我建议阅读Ben Frain撰写的使用HTML5和CSS的自适应Web设计 。

关于作者 (About the Author)

Ben Frain has been a web designer/developer since 1996. He is currently employed as a Senior Front-end Developer at Bet365. Before the web, he worked as an underrated (and modest) TV actor and technology journalist, having graduated from Salford University with a degree in Media and Performance.

Ben Frain自1996年以来一直是一名Web设计师/开发人员。他目前受聘为Bet365的高级前端开发人员。 在上网之前，他曾是索尔福德大学(Salford University)媒体与表演学位的一名被低估(适度)的电视演员和技术记者。

He has written four equally underrated (his opinion) screenplays and still harbors the (fading) belief he might sell one. Outside of work, he enjoys simple pleasures. Playing indoor football while his body and wife still allow it, and wrestling with his two sons. His other book, Sass and Compass for Designers is available now.

他已经写了四部同样被低估(他的观点)的剧本，但仍然怀有(可能会)相信他可能会卖掉一部的想法。 在工作以外，他享受简单的乐趣。 在他的身体和妻子仍然允许的情况下进行室内足球比赛，并与两个儿子搏斗。 他的另一本书《设计师的Sass和Compass》现已上市。

翻译自: https://medium.com/javarevisited/converting-a-fixed-pixel-design-to-a-fluid-proportional-layout-1c36f495ca1e

流体式布局与响应式布局