響應(yīng)式網(wǎng)頁設(shè)計(jì)——適合初學(xué)者的現(xiàn)代網(wǎng)站代碼

科拉德克里斯 2021-08-30 09:39:29 瀏覽數(shù) (4235)

反饋

當(dāng)互聯(lián)網(wǎng)剛開始蓬勃發(fā)展時(shí)，網(wǎng)站訪問者使用臺(tái)式機(jī)或者寬屏筆記本電腦來訪問網(wǎng)站。然后當(dāng)智能手機(jī)出現(xiàn)時(shí)，手機(jī)用戶不得不無休止地縮放和滾動(dòng)才能訪問和查看相同網(wǎng)站的不同部分。值得慶幸的是，由于響應(yīng)式網(wǎng)頁設(shè)計(jì)的革命性引入，如今情況已不再如此。在本文中，我將帶您了解響應(yīng)式網(wǎng)頁設(shè)計(jì)的演變、使其成為可能的各種集成，以及如何開始在您的編碼項(xiàng)目中使用它以獲得更好的用戶體驗(yàn)。

什么是響應(yīng)式網(wǎng)頁設(shè)計(jì)？

響應(yīng)式網(wǎng)頁設(shè)計(jì)使網(wǎng)頁可以在各種設(shè)備屏幕尺寸上正確呈現(xiàn)，而不會(huì)縮短或扭曲內(nèi)容。

例如，這并不意味著網(wǎng)站在手機(jī)上的顯示方式與在筆記本電腦上的顯示方式完全相同。相反，它意味著網(wǎng)頁的內(nèi)容適應(yīng)不同的屏幕尺寸——從大屏幕（臺(tái)式機(jī)和筆記本電腦）到中屏幕（平板電腦）再到移動(dòng)屏幕（各種屏幕尺寸的手機(jī)）。

它在保留相同內(nèi)容的同時(shí)做到了這一切（只是可能以不同的方式排列以適應(yīng)每個(gè)屏幕）。

響應(yīng)式網(wǎng)頁設(shè)計(jì)的演變

過去，人們主要使用臺(tái)式機(jī)和筆記本電腦在線查看內(nèi)容，因?yàn)榫W(wǎng)站僅針對(duì)這些屏幕進(jìn)行了優(yōu)化。

但隨著越來越多的人開始使用手機(jī)上網(wǎng)，人們開始抱怨他們所看到的糟糕的顯示和布局。

這對(duì)網(wǎng)頁設(shè)計(jì)師和開發(fā)人員意味著一件事：網(wǎng)站也需要針對(duì)移動(dòng)設(shè)備進(jìn)行優(yōu)化！

在過去十年中，移動(dòng)網(wǎng)站用戶數(shù)量首次開始超過臺(tái)式機(jī)和筆記本電腦。因此，從科技巨頭到小型企業(yè)，每個(gè)人都開始采用響應(yīng)式網(wǎng)頁設(shè)計(jì)方法。

開發(fā)人員和設(shè)計(jì)師還創(chuàng)造了閃亮的新移動(dòng)優(yōu)先設(shè)計(jì)。這意味著開發(fā)人員首先為移動(dòng)設(shè)備制作網(wǎng)站，然后是桌面。

這通常意味著移動(dòng)設(shè)備和更大屏幕的單獨(dú)網(wǎng)站，具有相同的服務(wù)器系統(tǒng)但不同的域。

例如，原始網(wǎng)站可能是examplewebsite.com，而移動(dòng)版本可能是examplewebsite.mobi、或m.examplewebsite.com。

用戶的設(shè)備將被現(xiàn)成的腳本檢測(cè)到，然后相應(yīng)的域?qū)⒈怀尸F(xiàn)。這種做法今天仍然存在。

除了雙域方法，網(wǎng)頁設(shè)計(jì)師和開發(fā)者可以先針對(duì)特定屏幕尺寸（可以是桌面、平板電腦或移動(dòng)設(shè)備）創(chuàng)建一個(gè)網(wǎng)站，然后添加所謂的媒體查詢，使網(wǎng)站適應(yīng)不同的屏幕尺寸。這是移動(dòng)優(yōu)先的方法。

如何使您的網(wǎng)站響應(yīng)

將響應(yīng)式網(wǎng)頁設(shè)計(jì)方法集成到項(xiàng)目中包括代碼的每一部分——在 HTML<head>元素、HTML 結(jié)構(gòu)、CSS 甚至 JavaScript 中。

我將盡可能清楚和詳細(xì)地描述這些過程。

在頭部設(shè)置視口

<meta name="viewport" content="width=device-width, initial-scale=1.0">

由于 HTML 在定義網(wǎng)頁結(jié)構(gòu)方面發(fā)揮著重要作用，因此它肯定與使網(wǎng)站響應(yīng)（適應(yīng)）不同屏幕尺寸有關(guān)。

您需要在要針對(duì)不同屏幕尺寸進(jìn)行優(yōu)化的任何網(wǎng)頁的頭部部分中包含元視口空元素。

這告訴瀏覽器將網(wǎng)頁的寬度呈現(xiàn)為設(shè)備的確切寬度。因此，如果設(shè)備的寬度為 1200 像素，則網(wǎng)頁寬度將為 1200 像素。如果設(shè)備的寬度為 720 像素，則網(wǎng)頁寬度將為 720 像素，依此類推。

這可以防止手機(jī)用戶過去遇到的煩人的放大和縮小，這對(duì)用戶體驗(yàn)不利。

以下是網(wǎng)站在沒有<meta>視口元素的小型手機(jī)上的外觀：

以下是帶有<meta>viewport 元素的同一個(gè)網(wǎng)站在小型手機(jī)上的顯示效果：

但是<meta>視口元素并不是讓網(wǎng)站適應(yīng)不同屏幕尺寸所需的全部元素。還有更多。

CSS 媒體查詢

用于使站點(diǎn)具有響應(yīng)性的最重要工具是 CSS3 媒體查詢。媒體查詢?cè)试S您以不同方式為多個(gè)屏幕編寫相同的 CSS 代碼。

通過媒體查詢，您可以告訴瀏覽器在特定屏幕上以特定方式顯示內(nèi)容。

媒體查詢的基本語法如下所示：

@media screen and (max-width: 720px) {
  /*CSS codes go here*/
}

這告訴瀏覽器在屏幕寬度低于 720 像素?cái)帱c(diǎn)時(shí)執(zhí)行媒體查詢中編寫的 CSS 代碼。斷點(diǎn)通?？梢允?1200 像素到 320 像素之間的任何值。

在下面的代碼片段中，我指示瀏覽器在屏幕寬度低于 768 像素時(shí)將更改為background-color深灰色和color藍(lán)色。

<body>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
      mollitia, consequuntur aliquid nobis vitae soluta maiores expedita ipsam
      delectus molestiae!
    </p>

    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
      architecto temporibus sed officiis vero, quisquam, corrupti quis veritatis
      dolor amet nostrum quam! Voluptates nam architecto enim neque nemo
      consectetur molestias unde fugit dolorum alias temporibus expedita
      doloribus deserunt laborum asperiores illum saepe, voluptate rerum quia
      sit facilis consequuntur perferendis aperiam. Nobis reiciendis debitis
      consequuntur placeat maiores voluptas, quos esse eum.
    </p>

    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus fugiat,
      nemo rem facere cumque error. Aliquam consequatur nobis cupiditate atque!
      Fugiat amet facere magni, nulla pariatur ut ullam, vel est eum voluptatum
      dicta quis dignissimos labore repellendus. Maiores deserunt quas tempore
      impedit, corporis quae amet blanditiis voluptatum laudantium magni ipsa!
    </p>
</body>

 @media screen and (max-width: 768px) {
        body {
          background-color: #333;
          color: #3498db;
        }
     }

不同的設(shè)備還存在其他幾個(gè)斷點(diǎn)。

320 - 480px 適用于 iPhone 6、7 和 5 等小型手機(jī)
478 - 768px 適用于平板電腦和 iPad
1025 - 1200px 適用于桌面和大屏幕

一些超大屏幕和電視可能需要超過 1200 像素。

響應(yīng)式文本

由于移動(dòng)電話上的文本大小與桌面上的文本大小不同，因此必須使文本隨著設(shè)備屏幕寬度的減小而縮小。

您可以在每個(gè)屏幕的媒體查詢中執(zhí)行此操作。一種使其更容易的方法是使用相對(duì)單位（%、rem 和 em）而不是絕對(duì)單位，例如 px。

在下面的 HTML 和 CSS 代碼片段中，我指示瀏覽器在大屏幕上將文本的字體大小設(shè)置為 3rem，在寬度低于 768 像素的屏幕上設(shè)置為 1.5rem：

<p>
   Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
   mollitia, consequuntur aliquid nobis vitae soluta maiores expedita ipsam
   delectus molestiae!
</p>

<p>
   Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
   architecto temporibus sed officiis vero, quisquam, corrupti quis veritatis
   dolor amet nostrum quam! Voluptates nam architecto enim neque nemo
   consectetur molestias unde fugit dolorum alias temporibus expedita
   doloribus deserunt laborum asperiores illum saepe, voluptate rerum quia
   sit facilis consequuntur perferendis aperiam. Nobis reiciendis debitis
   consequuntur placeat maiores voluptas, quos esse eum.
</p>

<p>
   Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus fugiat,
   nemo rem facere cumque error. Aliquam consequatur nobis cupiditate atque!
   Fugiat amet facere magni, nulla pariatur ut ullam, vel est eum voluptatum
   dicta quis dignissimos labore repellendus. Maiores deserunt quas tempore
   impedit, corporis quae amet blanditiis voluptatum laudantium magni ipsa!
</p>

@media screen and (max-width: 768px) {
        p {
          font-size: 1.5rem;
        }
      }

響應(yīng)式圖像

就像文本一樣，圖像也必須隨著屏幕寬度的減小而縮小。

圖像具有固定的寬度和高度，因此當(dāng)它們大于視口寬度（屏幕寬度）時(shí)，用戶通常必須滾動(dòng)才能看到整個(gè)內(nèi)容，這會(huì)造成糟糕的用戶體驗(yàn)。

開發(fā)人員通過為所有圖像設(shè)置 100% 的最大寬度并將它們顯示為塊級(jí)元素（默認(rèn)情況下圖像是內(nèi)聯(lián)元素）來解決這個(gè)問題。

您可以為代碼中的圖像單獨(dú)設(shè)置此項(xiàng)，但為了培養(yǎng) DRY（不要重復(fù)自己）原則，您應(yīng)該在所有圖像的重置中進(jìn)行設(shè)置。

 img {
        display: block;
        max-width: 100%;
      }

使圖像具有響應(yīng)性的另一種方法是使用 HTML 中的圖片元素。使用此元素，您可以告訴瀏覽器顯示與不同設(shè)備上的寬度相關(guān)的不同圖像。

<picture>
      <source
        media="(max-width: 1100px)"
        srcset="freecodecamp-large-logo.jpg"
      />
      <source
        media="(max-width: 900px)"
        srcset="freecodecamp-medium-logo.jpg"
      />
      <source media="(max-width: 760px)" srcset="freecodecamp-small-logo.jpg" />
      <img
        src="freecodecamp-large-logo.jpg"
        alt="freeCodeCamp"
        style="max-width: 100%"
      />
</picture>

在寬度為 1100px 及以下的屏幕上，將顯示 freecodecamp-large-logo
在寬度為 900px 及以下的屏幕上，將顯示 freecodecamp-medium-logo
在寬度為 760px 及以下的屏幕上，將顯示 freecodecamp-small-logo

如果屏幕寬度不滿足任何條件，則將顯示 freecodecamp-large-logo。

響應(yīng)式布局

任何網(wǎng)頁的布局決定了內(nèi)容在瀏覽器中的顯示方式。

過去，開發(fā)人員不得不使用表格，這并不容易控制。然后來了float和clearfix，這也很難管理。

CSS Grid 和 Flexbox 的引入徹底改變了布局，并為響應(yīng)式設(shè)計(jì)提供了更多的相關(guān)性。

彈性盒

使用 CSS flexbox，響應(yīng)式設(shè)計(jì)獲得了更多的相關(guān)性，因?yàn)橛辛怂槐靥砑犹嗝襟w查詢，這與使用浮動(dòng)布局時(shí)不同。

當(dāng) flex 的顯示被分配給包含元素時(shí)，默認(rèn)情況下元素方向在行上呈現(xiàn)。

您可以稍后使用媒體查詢將方向設(shè)置為具有 flex-direction 屬性的較小屏幕的列。必須將 flex-direction 屬性值顯式設(shè)置為列。

您還可以使用 flex-grow 和 flex-shrink 等屬性以您希望網(wǎng)頁內(nèi)容呈現(xiàn)的方式進(jìn)行布局。這兩個(gè)屬性使它們包含的元素隨著屏幕視口（寬度）的增加而增長，隨著視口的減少而縮小。多么酷??？

在下面的代碼片段中，不同文本塊在各自容器中的方向?qū)⒃谄聊粚挾却笥?768 像素時(shí)為一行，在寬度小于 768 像素時(shí)為一列。

我能夠通過將 body 元素內(nèi)的整個(gè)項(xiàng)目顯示為 flex 來做到這一點(diǎn)。

<body>
    <div class="container-one">
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
            mollitia, consequuntur aliquid nobis vitae soluta maiores expedita ipsam
            delectus molestiae!
        </p>
    </div>
      
    <div class="container-two">
        <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
        architecto temporibus sed officiis vero, quisquam, corrupti quis veritatis
        dolor amet nostrum quam! Voluptates nam architecto enim neque nemo
        consectetur molestias unde fugit dolorum alias temporibus expedita
        doloribus deserunt laborum asperiores illum saepe, voluptate rerum quia
        sit facilis consequuntur perferendis aperiam. Nobis reiciendis debitis
        consequuntur placeat maiores voluptas, quos esse eum.
        </p>
    </div>

    <div class="container-three">
        <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus fugiat,
        nemo rem facere cumque error. Aliquam consequatur nobis cupiditate atque!
        Fugiat amet facere magni, nulla pariatur ut ullam, vel est eum voluptatum
        dicta quis dignissimos labore repellendus. Maiores deserunt quas tempore
        impedit, corporis quae amet blanditiis voluptatum laudantium magni ipsa!
        </p>
    </div> 
</body>

body {
          display: flex;
      }

      div {
          border: 2px solid #2ecc71;
          margin-left: 6px;
      }

      @media screen and (max-width: 768px) {
        body {
          flex-direction: column;
        }
    }

CSS 網(wǎng)格

CSS grid 或多或少是 flexbox 的一種混合且更強(qiáng)大的形式。許多人爭(zhēng)辯說，無論您使用 Flexbox 做什么，您都可以使用 Grid 以更少的代碼行完成。

使用 CSS 網(wǎng)格，您可以以更直接的方式創(chuàng)建靈活的網(wǎng)格，因?yàn)槟梢允褂迷O(shè)置為列或行的 grid-auto-flow 屬性定義所需的列和行。

您可以使用 Grid 以這種方式執(zhí)行我們?cè)?Flexbox 示例中所做的相同操作：

body {
          display: grid;
          grid-auto-flow: column;
          gap: 6px;
      }

      div {
          border: 2px solid #2ecc71;
          margin-left: 6px;
      }

      @media screen and (max-width: 768px) {
        body {
            grid-auto-flow: row;
        } 
     }

您可以在 W3Cschool CSS 課程中了解有關(guān) Flexbox 和 Grid 的更多信息。

結(jié)論

由于互聯(lián)網(wǎng)用戶現(xiàn)在更多地通過手機(jī)訪問網(wǎng)站而不是臺(tái)式機(jī)和筆記本電腦，因此響應(yīng)式設(shè)計(jì)是制作現(xiàn)代網(wǎng)站的必經(jīng)之路。

了解響應(yīng)式設(shè)計(jì)最佳實(shí)踐將使您與其他開發(fā)人員區(qū)別開來，因?yàn)槟鷮⒛軌蛟谙嗤?HTML、CSS 和 JavaScript 文件中創(chuàng)建適應(yīng)不同屏幕尺寸的網(wǎng)站。

我希望這篇文章為您提供了制作響應(yīng)式真實(shí)網(wǎng)站所需的見解。

感謝您的閱讀。

HTML CSS 前端

0 人點(diǎn)贊