流體式布局與響應式布局

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

流體式布局與響應式布局

總結

以上是生活随笔為你收集整理的流体式布局与响应式布局_将固定像素设计转换为流体比例布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。