Responsive design is not just about the web that automatically adjusts to different screen resolutions and resizeable images, but designs that are crucial for web performance.

自適應設計不僅涉及可自動適應不同屏幕分辨率和可調整大小圖像的網絡，而且對于網絡性能至關重要。

In my short journey of working with HTML and CSS, interactions with other developers, I found out that these two words — flexibility and responsiveness have often been used interchangeably to illustrate the core of responsive web design.

在使用HTML和CSS以及與其他開發人員進行交互的短暫旅程中，我發現靈活性和響應性這兩個詞經常互換使用，以說明響應式Web設計的核心。

Ethan Marcotte coined the term responsive web design and defined it to mean fluid/flexible images/media queries in a May 2010 article in A List Apart.

Ethan Marcotte在2010年5月的A List Apart中的一篇文章中創造了“ 響應式網頁設計”一詞，并將其定義為表示流暢/靈活的圖像/媒體查詢。

There are lots of great articles out there about responsive design, what it is, key concepts, principles, and great philosophies surrounding it. In this article, we will not spend time on those but rather look at great techniques that allow us to implement responsive web design more efficiently.

關于響應式設計，它是什么，關鍵概念，原理以及圍繞它的偉大哲學，有很多很棒的文章。 在本文中，我們將不會花時間在這些上，而會研究使我們能夠更有效地實現響應式Web設計的出色技術。

Below are the basic responsive design principles, I will tackle the first two.

以下是基本的響應式設計原則 ，我將解決前兩個原則 。

1. Fluid Grids and Layouts: allow contents to easily adapt to the current viewport width used to browse the website. Uses % rather than px for all layout-related lengths.

1. 流體網格和布局：允許內容輕松適應當前用于瀏覽網站的視口寬度。 對于所有與布局相關的長度，請使用％而不是px。

2. Flexible/Responsive Images: images behave differently than text content, and so we need to ensure that they also adapt nicely to the current viewport.

2. 靈活/響應的圖像：圖像的行為與文本內容不同，因此我們需要確保它們也能很好地適應當前視口。

3. Media Queries: the ability to change styles on certain viewport widths(breakpoints), allowing us to create a different version of our website for different widths.

3. 媒體查詢：能夠在某些視口寬度(斷點)上更改樣式的功能，使我們可以為不同的寬度創建網站的不同版本。

流體網格和布局： (Fluid Grids and Layouts:)

在項目中應如何以及為什么使用“ rem”單元。 (How and Why You Should Use ‘rem’ Units in Your Projects.)

I was so amazed when I realized I can simply change the width, height, padding, margin, and literary any element you could apply pixel unit to with just one adjustment on my media query at the same time instead of writing hundreds on lines of codes in media queries. It’s amazing, yea right!

當我意識到自己只需更改媒體查詢的寬度，高度，填充，邊距和文學內容即可，而對我的媒體查詢只需一次調整，而無需在代碼行上編寫數百個內容時，我感到非常驚訝在媒體查詢中。 太神奇了，是的！

Now let’s see how this awesome technique works. First understanding how the rem unit works is the key to mastering this simple yet powerful technique.

現在，讓我們看看這項出色的技術是如何工作的。 首先了解rem單元的工作方式是掌握此簡單而強大的技術的關鍵。

The rem unit is always in relation to the root font size, so if we set the root font size, other measurements can easily be changed on our page.

rem單位始終與根字體大小有關，因此，如果我們設置根字體大小，則可以在頁面上輕松更改其他尺寸。

html {font-size: 10px;}

Now, note the default browser font-size is 16px but we are setting ours to 10px for easy calculations. So 10px equals 1rem, 45px will be 4.5rem. All we have to do is simply divide all the pixels by 10 and that’s our rem.

現在，請注意默認瀏覽器的字體大小為16px，但為了方便計算，我們將其設置為10px。 因此10px等于1rem，45px將為4.5rem。 我們要做的就是簡單地將所有像素除以10，這就是我們的rem。

The only problem is by setting our root font-size to 10px we override the browser font size setting. Some users with bad sight do manually change their browser font size settings to have a bigger font size.

唯一的問題是，通過將我們的根字體大小設置為10px，我們將覆蓋瀏覽器字體大小設置。 一些視力不好的用戶會手動更改其瀏覽器的字體大小設置，以使其具有更大的字體大小。

Setting the 10px font-size on our root removes the ability for these people to see our website properly because they can no longer change the default font size.

在我們的根目錄上設置10px字體大小將使這些人無法正確查看我們的網站，因為他們無法再更改默認字體大小。

It will remain 10 pixels no matter the user’s default font-size, this is a bad practice. That is why we’re going to set our font-size to a percentage, which will translate to a percentage of the font-size given by the browser.

無論用戶的默認字體大小如何，它都將保留10個像素，這是一個不好的做法。 這就是為什么我們要將字體大小設置為一個百分比，這將轉換為瀏覽器給定的字體大小的百分比。

We are counting on the fact that the default browser font-size is usually 16px, and that remains the absolute default.

我們指望這樣的事實，默認瀏覽器字體大小通常為16px，并且仍然是絕對默認值。

So let’s do simple math, if we put 100% here, this would mean that the root font size is 16 pixels.

因此，讓我們做一個簡單的數學運算，如果我們將100％放在此處，這意味著根字體大小為16像素。

All we have to do is to divide what we want which is 10, by 16. 10/16 * 100 = 62.5%.

我們要做的就是將我們想要的10除以16。10/ 16 * 100 = 62.5％。

Then that will translate to 10pixels which is what we want.

然后，這將轉化為我們想要的10像素。

html {font-size: 62.5%;}

This technique is widely used in the CSS developer community because it’s so simple and yet so powerful.

該技術非常簡單，但功能強大，因此在CSS開發人員社區中得到了廣泛使用。

靈活/響應的圖像 (Flexible/Responsive Images)

The main philosophy behind responsive images is serving the right image to the right screen-size and device using different techniques in HTML or CSS so users do not have to download images that are way too large for their devices.

響應式圖像的主要原理是使用HTML或CSS中的不同技術將正確的圖像提供給合適的屏幕尺寸和設備，因此用戶不必下載對于他們的設備而言太大的圖像。

It’s okay to have flexible images that scale nicely with the viewport width, but responsive images take things to a whole new level and that’s because responsive images are not just an aspect of responsive design but even more importantly of web performance.

可以使彈性圖像與視口寬度很好地縮放是可以的，但是響應式圖像將事情帶到了一個全新的高度，這是因為響應式圖像不僅是響應式設計的一個方面，而且更重要的是Web性能。

As developers, we really have a responsibility here and responsive images help us solve these problems.

作為開發人員，我們確實有責任，響應式圖像可以幫助我們解決這些問題。

While it may be okay to send a 1mb image for the hero section to a desktop computer, it is not okay to do that to a phone, which may have a slow or expensive data plan somewhere in the world like where I am, Nigeria.

雖然可以將英雄部分的1mb圖像發送到臺式計算機，但不能將其發送到電話，因為電話可能在世界上某個地方(如我所在的地方，尼日利亞)的數據計劃緩慢或昂貴。

So instead of sending 1mb to whatever device is consuming the page, it makes more sense to send the 1mb image to a device with a large screen that needs the image and a much smaller version of the image to a device with a small screen that doesn’t need such a large image anyway. Not many developers out there know and take this even seriously.

因此，將1mb圖像發送到需要該圖像的大屏幕設備，將較小版本的圖像發送到一個沒有屏幕的小設備，而不是將1mb發送到占用該頁面的任何設備，無論如何都不需要這么大的圖像。 沒有很多開發人員知道并認真對待這一點。

合理地說，主要有三個用例。 (There are mainly three use cases where it makes sense.)

1. Resolution switching: Here all we do is to serve up the same image for a smaller screen but with a smaller resolution. So basically, the same image but a smaller version for a device that doesn’t need such a big image.

   分辨率切換：這里我們要做的只是在較小的屏幕上以較小的分辨率提供相同的圖像。 因此，基本上，相同的圖像但較小的版本適用于不需要這么大圖像的設備。

In the example below, we use the width descriptor to tell the browser the width of the image and it automatically decides which image to download

在下面的示例中，我們使用寬度描述符來告訴瀏覽器圖像的寬度，并自動決定要下載哪個圖像

<img srcset=”img/design-1.jpg 300w, img/design-1-large.jpg 1000w” alt=”design” >

But width descriptor is not enough to decide which images to choose, so we add sizes attribute. Sizes are used to inform the browser about the approximate width of the image at different viewport width.

但是寬度描述符不足以決定選擇哪個圖像，因此我們添加了sizes屬性。 大小用于告知瀏覽器有關不同視口寬度的圖像的近似寬度。

<img srcset=”img/design-1.jpg 300w, img/design-1-large.jpg 1000w” alt=”design” sizes=”(max-width:900px) 20vw”, (max-width:600px) 30vw, 300px” >

It’s a good practice to have a fallback, just in case the browser does not understand ‘srcset’.

如果瀏覽器不了解“ srcset”，則最好進行回退。

<img srcset=”img/design-1.jpg 300w, img/design-1-large.jpg 1000w” alt=”design” sizes=”(max-width:900px) 20vw”, (max-width:600px) 30vw, 300px” ><img src=”img/design-1-large.jpg” alt="design">

2. Density switching: This is a special case of resolution switching but where the screen size does not matter but a screen pixel density does instead. Pixel density is the number of pixels found in an inch or a centimeter. Now, what matters to us is what there are low-resolution screens and high-resolution screens.

2. 密度切換 ：這是分辨率切換的一種特殊情況，但是屏幕尺寸無關緊要，而屏幕像素密度卻是。 像素密度是以英寸或厘米為單位的像素數。 現在，對我們而言重要的是低分辨率屏幕和高分辨率屏幕。

Low-resolution screens are just typical PC screens, if we say an image is 100 pixels high, they will actually use 100 physical pixels on the screen to display these 100 pixels that we specified.

低分辨率屏幕只是典型的PC屏幕，如果我們說一幅圖像高100像素，它們實際上將使用屏幕上的100個物理像素來顯示我們指定的這100個像素。

High-resolution screens are the ones found in all modern smartphones and even some computers already have them, like the MacBook with retina displays. These are high-resolution screens and can be called 2x screens because they use two physical pixels to display one pixel of our design. This implies that if we want our image to look sharp on high-resolution displays we should use 2x the image size we are serving the low-resolution displays.

高分辨率屏幕是所有現代智能手機中都可以使用的屏幕，甚至有些計算機已經安裝了高分辨率屏幕，例如帶有視網膜顯示屏的MacBook。 這些是高分辨率屏幕，可以稱為2x屏幕，因為它們使用兩個物理像素來顯示我們設計的一個像??素。 這意味著，如果我們希望圖像在高分辨率顯示器上看起來清晰，則應使用供低分辨率顯示器使用的圖像大小的2倍。

In the example below, we use the density descriptor to tell the browser the density of the image and it automatically decides which image to download

在下面的示例中，我們使用密度描述符來告訴瀏覽器圖像的密度，并自動決定要下載哪個圖像

<img srcset=”img/logo-1x.png 1x, img/logo-2x.png 2x” alt=”logo” >

3. Art Direction: This happens when you don’t just want to serve the same image but in a smaller resolution, but a whole different image for different screen sizes.

3. 藝術指導：當您不只是希望以較小的分辨率提供相同的圖像，而是針對不同的屏幕尺寸提供完全不同的圖像時，就會發生這種情況。

In this example, we see if the conditions of images inside the <source> are not met, the device will be forced to use the image inside the <img> tag.

在此示例中，我們看到如果<source>內部的圖像條件不滿足，設備將被迫使用<img>標簽內部的圖像。

<picture><source srcset=”img/logo-small-1x.png 1px, img/logo-small-2x.png 2x” media=”(max-width: 600px)”><img srcset=”img/logo-1x.png 1x, img/logo-2x.png 2x” alt=”logo” ></picture>

In conclusion, resolution and density switching is when you want to serve the same image but with different resolutions. And art directions is when you want to serve a completely different image.

總之，分辨率和濃度切換是當您要提供相同的圖像但具有不同的分辨率時。 而藝術指導就是您要提供完全不同的圖像。

Using rem units in my daily web design projects has helped reduce the lines of codes I write in media queries and has given me so much control in my responsive design experience.

在我的日常Web設計項目中使用rem單位有助于減少我在媒體查詢中編寫的代碼行，并在響應式設計經驗中給予了我太多控制。

If you want to dive deeper into these concepts, you should take a look at the Advanced CSS and SASS… course by Jonas Schmedtmann, I give all the credits to him.

如果您想更深入地研究這些概念，則應該看看Jonas Schmedtmann的Advanced CSS and SASS…課程 ，我將所有功勞歸功于他。