網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序定制開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了蔡家坡免費(fèi)建站歡迎大家使用！

大多數(shù)現(xiàn)代網(wǎng)站使用響應(yīng)性網(wǎng)頁(yè)設(shè)計(jì)技術(shù)，以確保其外觀良好、可讀性好，并在任何屏幕大小的設(shè)備上保持可用性，如手機(jī)、平板電腦、筆記本電腦、臺(tái)式電腦顯示器、電視、投影儀等。

使用這些技術(shù)的站點(diǎn)有一個(gè)模板，該模板根據(jù)屏幕尺寸修改布局：

較小的屏幕通常顯示線性、單列視圖，其中通過單擊（漢堡）圖標(biāo)激活菜單等UI控件。

更大的屏幕顯示更多信息，可能帶有水平對(duì)齊的側(cè)欄。UI控件（如菜單項(xiàng)）可能始終可見，以便于訪問。

響應(yīng)式web設(shè)計(jì)的一個(gè)重要部分是實(shí)現(xiàn)CSS或JavaScript媒體查詢，以檢測(cè)設(shè)備大小并自動(dòng)提供適合該大小的設(shè)計(jì)。我們將討論為什么這些查詢很重要以及如何使用它們，但首先，讓我們討論一般的響應(yīng)式設(shè)計(jì)。

為什么響應(yīng)式設(shè)計(jì)很重要？

不可能只提供一個(gè)頁(yè)面布局，而期望它在任何地方都能工作。

當(dāng)手機(jī)在21世紀(jì)初首次獲得基本的web訪問時(shí)，網(wǎng)站所有者通常會(huì)創(chuàng)建兩到三個(gè)單獨(dú)的頁(yè)面模板，松散地基于手機(jī)和桌面視圖。隨著設(shè)備種類呈指數(shù)級(jí)增長(zhǎng)，這種做法變得越來(lái)越不切實(shí)際。

今天，有許多屏幕尺寸，從微型手表顯示器到巨大的8K顯示器甚至更大。即使你只考慮手機(jī)，最近的設(shè)備可以比許多低端筆記本電腦具有更高的分辨率。

移動(dòng)設(shè)備的使用量也超過了臺(tái)式電腦。除非你的網(wǎng)站有一組特定的用戶，否則你可以期望大多數(shù)人通過智能手機(jī)訪問它。盡管大多數(shù)網(wǎng)頁(yè)設(shè)計(jì)師、開發(fā)人員和客戶繼續(xù)使用標(biāo)準(zhǔn)PC機(jī)，但小屏幕設(shè)備已不再是后知后覺，應(yīng)該從一開始就加以考慮。

谷歌已經(jīng)認(rèn)識(shí)到移動(dòng)設(shè)備的重要性。當(dāng)網(wǎng)站在智能手機(jī)上可用且表現(xiàn)良好時(shí)，在谷歌搜索中排名會(huì)更好。好的內(nèi)容仍然至關(guān)重要，但加載速度慢、無(wú)法適應(yīng)用戶群屏幕尺寸的網(wǎng)站可能會(huì)損害您的業(yè)務(wù)。

最后，考慮可訪問性。一個(gè)適合所有人的網(wǎng)站，無(wú)論他們使用什么設(shè)備，都會(huì)吸引更多的觀眾。可訪問性是許多國(guó)家的法律要求，但即使不是你所在的地方，也要考慮到更多的觀眾會(huì)帶來(lái)更多的轉(zhuǎn)換和更高的盈利能力。

響應(yīng)式設(shè)計(jì)如何工作？

響應(yīng)式設(shè)計(jì)的基礎(chǔ)是媒體查詢：一種CSS技術(shù)，可以根據(jù)輸出類型（屏幕、打印機(jī)甚至語(yǔ)音）、屏幕尺寸、顯示縱橫比、設(shè)備方向、顏色深度和指針精度等指標(biāo)應(yīng)用樣式。媒體查詢還可以考慮用戶偏好，包括減少動(dòng)畫、明暗模式和更高對(duì)比度。

我們展示的示例演示了僅使用屏幕寬度的媒體查詢，但是站點(diǎn)可以更加靈活。有關(guān)詳細(xì)信息，請(qǐng)參閱MDN上的全套選項(xiàng)。

媒體查詢支持非常出色，已經(jīng)在瀏覽器中使用了十多年。只有IE8及以下版本沒有支持。它們忽略了媒體查詢應(yīng)用的樣式，但這有時(shí)會(huì)帶來(lái)好處（請(qǐng)參閱下面的最佳實(shí)踐部分）。

使用媒體查詢應(yīng)用樣式有三種標(biāo)準(zhǔn)方法。第一個(gè)加載HTML代碼中的特定樣式表。例如，當(dāng)設(shè)備的屏幕寬度至少為800像素時(shí)，以下標(biāo)記將加載wide.css樣式表：

其次，樣式表可以使用@import規(guī)則有條件地加載到CSS文件中：

/* main.css */
@import url('wide.css') screen and (min-width: 800px);

請(qǐng)注意，應(yīng)避免使用@import，因?yàn)槊總€(gè)導(dǎo)入的CSS文件都是渲染塊。HTML的標(biāo)記是并行下載的，而@import則是串行下載文件。

更典型的是，您將使用@media CSS規(guī)則塊在樣式表中應(yīng)用媒體查詢，該規(guī)則塊修改特定的樣式。例如：

/* default styles */
main {
  width: 400px;
}

/* styles applied when screen has a width of at least 800px */
@media screen and (min-width: 800px) {
  main {
    width: 760px;
  }
}

開發(fā)人員可以應(yīng)用任何必要的媒體查詢規(guī)則來(lái)調(diào)整站點(diǎn)的布局。

媒體查詢最佳實(shí)踐

最初設(shè)計(jì)媒體查詢時(shí)，許多網(wǎng)站選擇了一套固定的布局。這在概念上更易于設(shè)計(jì)和編碼，因?yàn)樗行У貜?fù)制了一組有限的頁(yè)面模板。例如：

這項(xiàng)技術(shù)有缺陷。在非常小和非常大的屏幕上的結(jié)果可能看起來(lái)很差，并且隨著設(shè)備和屏幕尺寸的變化，可能需要CSS維護(hù)。

一個(gè)更好的選擇是使用帶有斷點(diǎn)的“移動(dòng)第一流體”設(shè)計(jì)，該斷點(diǎn)可以在特定大小下調(diào)整布局。本質(zhì)上，默認(rèn)布局使用最簡(jiǎn)單的小屏幕樣式，將元素定位在線性垂直塊中。

例如，