flex如何做響應(yīng)式設(shè)計

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.

自適應(yīng)設(shè)計不僅涉及可自動適應(yīng)不同屏幕分辨率和可調(diào)整大小圖像的網(wǎng)絡(luò)，而且對于網(wǎng)絡(luò)性能至關(guān)重要。

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以及與其他開發(fā)人員進行交互的短暫旅程中，我發(fā)現(xiàn)靈活性和響應(yīng)性這兩個詞經(jīng)常互換使用，以說明響應(yīng)式Web設(shè)計的核心。

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中的一篇文章中創(chuàng)造了“ 響應(yīng)式網(wǎng)頁設(shè)計”一詞，并將其定義為表示流暢/靈活的圖像/媒體查詢。

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.

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

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

以下是基本的響應(yīng)式設(shè)計原則 ，我將解決前兩個原則 。

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. 流體網(wǎng)格和布局：允許內(nèi)容輕松適應(yīng)當(dāng)前用于瀏覽網(wǎng)站的視口寬度。 對于所有與布局相關(guān)的長度，請使用％而不是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. 靈活/響應(yīng)的圖像：圖像的行為與文本內(nèi)容不同，因此我們需要確保它們也能很好地適應(yīng)當(dāng)前視口。

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. 媒體查詢：能夠在某些視口寬度(斷點)上更改樣式的功能，使我們可以為不同的寬度創(chuàng)建網(wǎng)站的不同版本。

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

在項目中應(yīng)如何以及為什么使用“ 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!

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

How one simple change of the global font-size affects every element on the page.全局字體大小的一次簡單更改如何影響頁面上的每個元素。

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.

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

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單位始終與根字體大小有關(guān)，因此，如果我們設(shè)置根字體大小，則可以在頁面上輕松更改其他尺寸。

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.

現(xiàn)在，請注意默認瀏覽器的字體大小為16px，但為了方便計算，我們將其設(shè)置為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.

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

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.

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

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個像素，這是一個不好的做法。 這就是為什么我們要將字體大小設(shè)置為一個百分比，這將轉(zhuǎn)換為瀏覽器給定的字體大小的百分比。

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.

因此，讓我們做一個簡單的數(shù)學(xué)運算，如果我們將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.

然后，這將轉(zhuǎn)化為我們想要的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.

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

靈活/響應(yīng)的圖像 (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.

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

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.

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

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

作為開發(fā)人員，我們確實有責(zé)任，響應(yīng)式圖像可以幫助我們解決這些問題。

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圖像發(fā)送到臺式計算機，但不能將其發(fā)送到電話，因為電話可能在世界上某個地方(如我所在的地方，尼日利亞)的數(shù)據(jù)計劃緩慢或昂貴。

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圖像發(fā)送到需要該圖像的大屏幕設(shè)備，將較小版本的圖像發(fā)送到一個沒有屏幕的小設(shè)備，而不是將1mb發(fā)送到占用該頁面的任何設(shè)備，無論如何都不需要這么大的圖像。 沒有很多開發(fā)人員知道并認真對待這一點。

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

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.

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

Screenshot from Jonas Schmedtmann Advanced CSS and SASS courseJonas Schmedtmann高級CSS和SASS課程的屏幕截圖

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屬性。 大小用于告知瀏覽器有關(guān)不同視口寬度的圖像的近似寬度。

<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. 密度切換 ：這是分辨率切換的一種特殊情況，但是屏幕尺寸無關(guān)緊要，而屏幕像素密度卻是。 像素密度是以英寸或厘米為單位的像素數(shù)。 現(xiàn)在，對我們而言重要的是低分辨率屏幕和高分辨率屏幕。

Screenshot from Jonas Schmedtmann Advanced CSS and SASS courseJonas Schmedtmann高級CSS和SASS課程的屏幕截圖

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.

高分辨率屏幕是所有現(xiàn)代智能手機中都可以使用的屏幕，甚至有些計算機已經(jīng)安裝了高分辨率屏幕，例如帶有視網(wǎng)膜顯示屏的MacBook。 這些是高分辨率屏幕，可以稱為2x屏幕，因為它們使用兩個物理像素來顯示我們設(shè)計的一個像??素。 這意味著，如果我們希望圖像在高分辨率顯示器上看起來清晰，則應(yīng)使用供低分辨率顯示器使用的圖像大小的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. 藝術(shù)指導(dǎo)：當(dāng)您不只是希望以較小的分辨率提供相同的圖像，而是針對不同的屏幕尺寸提供完全不同的圖像時，就會發(fā)生這種情況。

Screenshot from Jonas Schmedtmann Advanced CSS and SASS courseJonas Schmedtmann高級CSS和SASS課程的屏幕截圖

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>內(nèi)部的圖像條件不滿足，設(shè)備將被迫使用<img>標(biāo)簽內(nèi)部的圖像。

<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.

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

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設(shè)計項目中使用rem單位有助于減少我在媒體查詢中編寫的代碼行，并在響應(yīng)式設(shè)計經(jīng)驗中給予了我太多控制。

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.

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

UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in.UX Para Minas Pretas (UX For Black Women)，這是一個巴西組織，致力于通過采取行動，賦權(quán)和知識共享的舉措來促進科技行業(yè)中的黑人女性平等。 對系統(tǒng)性種族主義保持沉默是不可行的。 建立您相信的設(shè)計社區(qū)。

翻譯自: https://uxdesign.cc/responsive-design-youre-doing-it-wrong-d88a52e1d5f7

flex如何做響應(yīng)式設(shè)計

總結(jié)

以上是生活随笔為你收集整理的flex如何做响应式设计_响应式设计-您做错了！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。