八維教育計(jì)算機(jī)培訓(xùn)使用 CSS 的響應(yīng)式網(wǎng)頁設(shè)計(jì)

時(shí)間：2023-10-07 08:24:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-07 08:24:01 來源：網(wǎng)站運(yùn)營(yíng)

八維教育計(jì)算機(jī)培訓(xùn)使用 CSS 的響應(yīng)式網(wǎng)頁設(shè)計(jì)：

八維教育計(jì)算機(jī)培訓(xùn)使用 CSS 的響應(yīng)式網(wǎng)頁設(shè)計(jì)

今天我們來聊聊響應(yīng)式網(wǎng)頁設(shè)計(jì)的一些常見問題。雖然不會(huì)教你響應(yīng)式網(wǎng)頁設(shè)計(jì)的完整概念，但會(huì)回顧一些相關(guān)主題，例如導(dǎo)航欄、字體、圖片、彈性和網(wǎng)格、媒體查詢等。你將對(duì)如何制作響應(yīng)式網(wǎng)頁有一些了解從中為手機(jī)和平板設(shè)備設(shè)計(jì)。

字體大小 -

當(dāng)更改字體大小以適應(yīng)視口時(shí)，尤其是對(duì)于在桌面模式下顯示良好但在移動(dòng)視圖中顯示不佳的大標(biāo)題。

對(duì)于第一種方式，您可以使用 vw 的 calc 方法根據(jù)視口調(diào)整字體大小，但有時(shí)它可能會(huì)變得很大或很小。

當(dāng)您希望為特定斷點(diǎn)范圍設(shè)置字體大小時(shí)，可以使用另一種方法。

圖片 -

當(dāng)您希望根據(jù)視口放大或縮小圖像時(shí)

我將圖像的最大寬度設(shè)置為 100%，因此它不會(huì)超出該限制。通過選擇最小寬度，您可以決定圖像應(yīng)該縮小多少；在這種情況下，200px 表示圖像在停止前最多只能縮小 200px。圖像的高度將適當(dāng)調(diào)整。

此外，您可以將最大寬度減小到例如 60%，這樣它就不會(huì)變得太寬以供桌面查看。

例子 -

Flex box -

當(dāng)你想要完全控制子元素時(shí)使用 flexbox。

我通常使用 flexbox 來創(chuàng)建水平列表、導(dǎo)航欄、居中元素等。

這是一個(gè) flexbox 容器，它將項(xiàng)目放在水平線上，在 1 行中

Gap 用于提供子元素之間相等的間距，即 1rem(16px)。

Flex-wrap 在這種情況下至關(guān)重要，因?yàn)槿绻萜鞔笮〔蛔阋匀菁{一行中的所有項(xiàng)目，它會(huì)創(chuàng)建一個(gè)新行。容器大小縮小，將創(chuàng)建更多行。

這只是一個(gè)展示 flexbox 如何幫助響應(yīng)式網(wǎng)頁設(shè)計(jì)的演示。你可以從這里學(xué)習(xí) flexbox - A Complete Guide to Flexbox | CSS-Tricks

網(wǎng)格 -

網(wǎng)格是 CSS 中非常有用和強(qiáng)大的東西

我們可以創(chuàng)建具有響應(yīng)能力的二維網(wǎng)格

大多數(shù)時(shí)候，它用于在 nxn 網(wǎng)格元素中顯示列表，如產(chǎn)品頁面、圖片庫、卡片等。

它將生成一個(gè) 2x5 的網(wǎng)格，有 2 行和 5 列；它不是響應(yīng)式的，但我們可以使用媒體查詢使其響應(yīng)式。

另一個(gè)稱為 auto-fit 或 auto-fill 的值可用于在不使用媒體查詢的情況下創(chuàng)建響應(yīng)式網(wǎng)格。

當(dāng)容器大小不足以容納一行中的所有元素時(shí)，自動(dòng)填充將創(chuàng)建一個(gè)新行并繼續(xù)為較小的視口創(chuàng)建新行，直到它達(dá)到 1 列布局，每行中有一個(gè)元素。每個(gè)網(wǎng)格單元格將為 100px 或 1fr，以 minmax 函數(shù)中指定的較大者為準(zhǔn)。

媒體查詢 -

它是響應(yīng)式網(wǎng)頁設(shè)計(jì)的核心；它用于定義視口斷點(diǎn)，我們可以在其中對(duì)元素應(yīng)用不同的樣式，如上面的字體部分示例所示。

您可以指定一個(gè)最小范圍，當(dāng)元素的樣式到達(dá)由 min-width 指定的最小斷點(diǎn)時(shí)，該范圍內(nèi)的元素樣式將發(fā)生變化。

類似地，您可以指定一個(gè)最大范圍，當(dāng)元素的樣式達(dá)到由 max-width 指定的最大斷點(diǎn)時(shí)，該范圍內(nèi)的元素樣式將發(fā)生變化。*有兩種使用媒體查詢的方法 - 一種是移動(dòng)優(yōu)先方法，您首先為移動(dòng)設(shè)備設(shè)計(jì)，然后使用最小寬度設(shè)置一個(gè)最小斷點(diǎn)，在該斷點(diǎn)之上應(yīng)用平板電腦和桌面視圖的樣式。其次，使用大多數(shù)開發(fā)人員使用的桌面優(yōu)先方法，您將首先設(shè)置網(wǎng)頁的正常樣式，然后使用最大寬度設(shè)置移動(dòng)設(shè)計(jì)樣式，因此移動(dòng)設(shè)計(jì)將應(yīng)用到某個(gè)斷點(diǎn)，并且在該斷點(diǎn)之上，將應(yīng)用平板電腦或桌面樣式。

所以我創(chuàng)建了一個(gè)簡(jiǎn)單的導(dǎo)航欄，它可以響應(yīng)媒體查詢和 flexbox。

您可以使用 javascript 添加帶有漢堡包圖標(biāo)的切換效果

正確的導(dǎo)航欄示例 -