建站
咨詢
售后
建站咨詢
新聞中心
網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序定制開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了蔡家坡免費建站歡迎大家使用！
大多數(shù)現(xiàn)代網(wǎng)站使用響應(yīng)性網(wǎng)頁設(shè)計技術(shù)，以確保其外觀良好、可讀性好，并在任何屏幕大小的設(shè)備上保持可用性，如手機、平板電腦、筆記本電腦、臺式電腦顯示器、電視、投影儀等。
使用這些技術(shù)的站點有一個模板，該模板根據(jù)屏幕尺寸修改布局：
較小的屏幕通常顯示線性、單列視圖，其中通過單擊（漢堡）圖標(biāo)激活菜單等UI控件。
更大的屏幕顯示更多信息，可能帶有水平對齊的側(cè)欄。UI控件（如菜單項）可能始終可見，以便于訪問。
響應(yīng)式web設(shè)計的一個重要部分是實現(xiàn)CSS或JavaScript媒體查詢，以檢測設(shè)備大小并自動提供適合該大小的設(shè)計。我們將討論為什么這些查詢很重要以及如何使用它們，但首先，讓我們討論一般的響應(yīng)式設(shè)計。
為什么響應(yīng)式設(shè)計很重要？
不可能只提供一個頁面布局，而期望它在任何地方都能工作。
當(dāng)手機在21世紀(jì)初首次獲得基本的web訪問時，網(wǎng)站所有者通常會創(chuàng)建兩到三個單獨的頁面模板，松散地基于手機和桌面視圖。隨著設(shè)備種類呈指數(shù)級增長，這種做法變得越來越不切實際。
今天，有許多屏幕尺寸，從微型手表顯示器到巨大的8K顯示器甚至更大。即使你只考慮手機，最近的設(shè)備可以比許多低端筆記本電腦具有更高的分辨率。
移動設(shè)備的使用量也超過了臺式電腦。除非你的網(wǎng)站有一組特定的用戶，否則你可以期望大多數(shù)人通過智能手機訪問它。盡管大多數(shù)網(wǎng)頁設(shè)計師、開發(fā)人員和客戶繼續(xù)使用標(biāo)準(zhǔn)PC機，但小屏幕設(shè)備已不再是后知后覺，應(yīng)該從一開始就加以考慮。
谷歌已經(jīng)認(rèn)識到移動設(shè)備的重要性。當(dāng)網(wǎng)站在智能手機上可用且表現(xiàn)良好時，在谷歌搜索中排名會更好。好的內(nèi)容仍然至關(guān)重要，但加載速度慢、無法適應(yīng)用戶群屏幕尺寸的網(wǎng)站可能會損害您的業(yè)務(wù)。
最后，考慮可訪問性。一個適合所有人的網(wǎng)站，無論他們使用什么設(shè)備，都會吸引更多的觀眾。可訪問性是許多國家的法律要求，但即使不是你所在的地方，也要考慮到更多的觀眾會帶來更多的轉(zhuǎn)換和更高的盈利能力。
響應(yīng)式設(shè)計如何工作？
響應(yīng)式設(shè)計的基礎(chǔ)是媒體查詢：一種CSS技術(shù)，可以根據(jù)輸出類型（屏幕、打印機甚至語音）、屏幕尺寸、顯示縱橫比、設(shè)備方向、顏色深度和指針精度等指標(biāo)應(yīng)用樣式。媒體查詢還可以考慮用戶偏好，包括減少動畫、明暗模式和更高對比度。
我們展示的示例演示了僅使用屏幕寬度的媒體查詢，但是站點可以更加靈活。有關(guān)詳細(xì)信息，請參閱MDN上的全套選項。
媒體查詢支持非常出色，已經(jīng)在瀏覽器中使用了十多年。只有IE8及以下版本沒有支持。它們忽略了媒體查詢應(yīng)用的樣式，但這有時會帶來好處（請參閱下面的最佳實踐部分）。
使用媒體查詢應(yīng)用樣式有三種標(biāo)準(zhǔn)方法。第一個加載HTML代碼中的特定樣式表。例如，當(dāng)設(shè)備的屏幕寬度至少為800像素時，以下標(biāo)記將加載wide.css樣式表：
其次，樣式表可以使用@import規(guī)則有條件地加載到CSS文件中：
/* main.css */
@import url('wide.css') screen and (min-width: 800px);
請注意，應(yīng)避免使用
@import，因為每個導(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ī)則來調(diào)整站點的布局。
媒體查詢最佳實踐
最初設(shè)計媒體查詢時，許多網(wǎng)站選擇了一套固定的布局。這在概念上更易于設(shè)計和編碼，因為它有效地復(fù)制了一組有限的頁面模板。例如：
這項技術(shù)有缺陷。在非常小和非常大的屏幕上的結(jié)果可能看起來很差，并且隨著設(shè)備和屏幕尺寸的變化，可能需要CSS維護。
一個更好的選擇是使用帶有斷點的“移動第一流體”設(shè)計，該斷點可以在特定大小下調(diào)整布局。本質(zhì)上，默認(rèn)布局使用最簡單的小屏幕樣式，將元素定位在線性垂直塊中。
例如，和在容器內(nèi)：
/* default small-screen device */
main {
width: 100%;
}
article, aside {
width: 100%;
padding: 2em;
}
以下是所有瀏覽器的結(jié)果-即使是不支持媒體查詢的非常舊的瀏覽器：
不支持媒體查詢的示例屏幕截圖。
當(dāng)支持媒體查詢且屏幕超過特定寬度（例如500px）時，和元素可以水平放置。本例使用CSS網(wǎng)格，其中主要內(nèi)容使用大約三分之二的寬度，次要內(nèi)容使用剩余的三分之一：
/* larger device */
@media (min-width: 500px) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2em;
}
article, aside {
width: auto;
padding: 0;
}
}
以下是大屏幕上的結(jié)果：
支持媒體查詢的示例屏幕截圖
媒體查詢替代方案
響應(yīng)性設(shè)計也可以在現(xiàn)代CSS中使用更新的屬性實現(xiàn)，這些屬性本質(zhì)上適應(yīng)布局，而無需檢查視口尺寸。選擇包括：
calc,min-width,max-width,min-height,max-height和較新的clamp屬性都可以定義尺寸標(biāo)注，根據(jù)已知限制和可用空間調(diào)整圖元的大小。- 視口單位
vw,vh,vmin和vmax可以根據(jù)屏幕尺寸分?jǐn)?shù)調(diào)整元素的大小。 - 文本可以顯示在CSS列中，在空間允許的情況下顯示或消失。
- 可以使用
min-content,fit-content和max-content維度，根據(jù)元素的子元素大小調(diào)整元素的大小。 - CSS flexbox可以在元素開始超出可用空間時進行換行或不換行。
- CSS網(wǎng)格元素可以使用比例分?jǐn)?shù)
fr單位調(diào)整大小。repeat CSS函數(shù)可以與minmax,auto-fit和auto-fill結(jié)合使用，以分配可用空間。 - 新的和（當(dāng)前）實驗性的CSS容器查詢可以對布局中組件可用的部分空間作出反應(yīng)。
這些選項超出了本文的范圍，但它們通常比只能響應(yīng)屏幕尺寸的粗糙媒體查詢更實用。如果您可以在沒有媒體查詢的情況下實現(xiàn)布局，那么隨著時間的推移，它可能會使用更少的代碼，更高效，并且需要更少的維護。
也就是說，在某些情況下，媒體查詢?nèi)匀皇俏ㄒ豢尚械牟季诌x項。當(dāng)你需要考慮其他屏幕因素時，它們?nèi)匀皇潜夭豢缮俚模热缈v橫比、設(shè)備方向、顏色深度、指針精度，或者用戶偏好，比如動畫和光/暗模式。
您是否需要JavaScript中的媒體查詢？
到目前為止，我們主要討論CSS。這是因為大多數(shù)布局問題都可以而且應(yīng)該單獨用CSS來解決。
但是，在某些情況下，使用JavaScript媒體查詢而不是CSS是可行的，例如：
- 諸如菜單之類的組件在小屏幕和大屏幕上具有不同的功能。
- 切換縱向/橫向會影響web應(yīng)用程序的功能。
- 基于觸摸的游戲必須更改
布局或調(diào)整控制按鈕。 - web應(yīng)用程序遵循用戶偏好，如暗/光模式、減少動畫、觸摸粗糙度等。
以下部分演示了在JavaScript中使用媒體查詢或類似于媒體查詢的選項的三種方法。所有示例都返回一個狀態(tài)字符串，其中：
- 小視圖=寬度小于400像素的屏幕；
- 中視圖=寬度在400到799像素之間的屏幕；
- 大視圖=寬度為800像素或更多的屏幕。
選項 1：監(jiān)視視場維度
在媒體查詢實施之前的黑暗日子里，這是唯一的選擇。JavaScript將偵聽瀏覽器“調(diào)整大小”事件，使用window.innerWidth和window.innerHeight（或舊IE中的document.body.clientWidth和document.body.clientHeight）分析視口尺寸，并做出相應(yīng)的反應(yīng)。
此代碼將計算出的小、中或大字符串輸出到控制臺：
const
screen = {
small: 0,
medium: 400,
large: 800
};
// observe window resize
window.addEventListener('resize', resizeHandler);
// initial call
resizeHandler();
// calculate size
function resizeHandler() {
// get window width
const iw = window.innerWidth;
// determine named size
let size = null;
for (let s in screen) {
if (iw >= screen[s]) size = s;
}
console.log(size);
}
您可以在此處查看工作演示。（如果使用桌面瀏覽器，請在新窗口中打開此鏈接，以便于調(diào)整大小。移動用戶可以旋轉(zhuǎn)設(shè)備。）
上面的示例在調(diào)整瀏覽器大小時檢查視口大??；確定它是小型、中型還是大型；并將其設(shè)置為body元素上的類，從而更改背景顏色。
這種方法的優(yōu)點包括：
- 它可以在每一個可以運行JavaScript的瀏覽器中運行——甚至是古老的應(yīng)用程序。
- 您正在捕獲準(zhǔn)確的尺寸，并可以做出相應(yīng)的反應(yīng)。
缺點是：
- 這是一種需要大量代碼的老技術(shù)。
- 是不是太精確了？你真的需要知道寬度是966px還是967px嗎？
- 您可能需要手動將維度匹配到相應(yīng)的CSS媒體查詢。
- 用戶可以快速調(diào)整瀏覽器大小，使處理程序功能每次都再次運行。這會通過限制事件來重載較舊和較慢的瀏覽器。它只能每500毫秒觸發(fā)一次。
總之，除非有非常具體和復(fù)雜的大小調(diào)整要求，否則不要監(jiān)視視口尺寸。
選項 2：定義和監(jiān)視CSS自定義屬性（可變）
這是一種稍微不尋常的技術(shù)，它在觸發(fā)媒體查詢時更改CSS中自定義屬性字符串的值。所有現(xiàn)代瀏覽器（但不是IE）都支持自定義屬性。
在下面的示例中，@media代碼塊內(nèi)的--screen custom property設(shè)置為“small”、“medium”或“l(fā)arge”：
body {
--screen: "small";
background-color: #cff;
text-align: center;
}
@media (min-width: 400px) {
body {
--screen: "medium";
background-color: #fcf;
}
}
@media (min-width: 800px) {
body {
--screen: "large";
background-color: #ffc;
}
}
可以使用偽元素單獨在CSS中輸出該值（但請注意，它必須包含在單引號或雙引號中）：
p::before {
content: var(--screen);
}
您可以使用JavaScript獲取自定義屬性值：
const screen = getComputedStyle(window.body)
.getPropertyValue('--screen');
但這并不是全部，因為返回值包含CSS中冒號后定義的所有空格和引號字符。字符串將為”large”，因此需要稍微整理一下：
// returns small, medium, or large in a string
const screen = getComputedStyle(window.body)
.getPropertyValue('--screen')
.replace(/\W/g, '');
您可以在此處查看工作演示。（如果使用桌面瀏覽器，請在新窗口中打開此鏈接，以便于調(diào)整大小。移動用戶可以旋轉(zhuǎn)設(shè)備。）
該示例每兩秒鐘檢查一次CSS值。它需要一點JavaScript代碼，但需要輪詢更改—您無法使用CSS自動檢測到自定義屬性值已更改。
也不可能將值寫入偽元素，并使用DOM變異觀察器檢測更改。偽元素不是DOM的“真實”部分！
優(yōu)點：
- 這是一種簡單的技術(shù)，主要使用CSS并匹配真實的媒體查詢。可以同時修改任何其他CSS屬性。
- 無需復(fù)制或解析JavaScript媒體查詢字符串。
主要缺點是無法自動對瀏覽器視口尺寸的更改作出反應(yīng)。如果用戶將手機從縱向旋轉(zhuǎn)到橫向，JavaScript永遠(yuǎn)不會知道。您可以經(jīng)常輪詢更改，但這是低效的，并且會導(dǎo)致您在演示中看到的時間延遲。
監(jiān)視CSS自定義屬性是一種新穎的技術(shù)，但只有在以下情況下才實用：
- 布局可以固定在頁面最初呈現(xiàn)的位置。一個信息亭或銷售點終端是可能的，但它們可能有固定的分辨率和單一的布局，因此JavaScript媒體查詢變得無關(guān)緊要。
- 該網(wǎng)站或應(yīng)用程序已經(jīng)頻繁運行基于時間的功能，如游戲動畫。可以同時檢查自定義屬性，以確定是否需要更改布局。
選項 3： 使用matchMedia API
matchMedia API有點不同尋常，但它允許您實現(xiàn)JavaScript媒體查詢。IE10以上的大多數(shù)瀏覽器都支持它。構(gòu)造函數(shù)返回一個MediaQueryList對象，該對象的matches屬性針對其特定的媒體查詢計算為true或false。
當(dāng)瀏覽器視口寬度為800px或更大時，以下代碼輸出true：
const mqLarge = window.matchMedia( '(min-width: 800px)' ); console.log( mqLarge.matches );
“change”事件可應(yīng)用于MediaQueryList對象。每次matches屬性的狀態(tài)更改時都會觸發(fā)此操作：它在先前為false（低于800px）后變?yōu)閠rue（高于800px），反之亦然。
將MediaQueryList對象作為第一個參數(shù)傳遞給接收處理程序函數(shù)：
const mqLarge = window.matchMedia( '(min-width: 800px)' );
mqLarge.addEventListener('change', mqHandler);
// media query handler function
function mqHandler(e) {
console.log(
e.matches ? 'large' : 'not large'
);
}
處理程序僅在matches屬性更改時運行。當(dāng)頁面最初加載時，它不會運行，因此您可以直接調(diào)用函數(shù)來確定啟動狀態(tài)：
// initial state mqHandler(mqLarge);
當(dāng)您在兩個不同的狀態(tài)之間移動時，API工作得很好。要分析三種或三種以上的狀態(tài)，如small, medium和large，需要更多的代碼。
首先用關(guān)聯(lián)的matchMedia對象定義屏幕狀態(tài)對象：
const
screen = {
small : null,
medium: window.matchMedia( '(min-width: 400px)' ),
large : window.matchMedia( '(min-width: 800px)' )
};
無需在small狀態(tài)上定義matchMedia對象，因為在small和medium之間移動時，medium事件處理程序?qū)?strong>觸發(fā)。
然后可以為medium和large事件設(shè)置事件偵聽器。它們調(diào)用相同的mqHandler()處理程序函數(shù)：
// media query change events
for (let [scr, mq] of Object.entries(screen)) {
if (mq) mq.addEventListener('change', mqHandler);
}
處理程序函數(shù)必須檢查所有MediaQueryList對象，以確定當(dāng)前是活動的small、medium還是large。比賽必須按大小順序進行，因為999px的寬度可以匹配中型和大型-只有最大的才能“獲勝”：
// media query handler function
function mqHandler() {
let size = null;
for (let [scr, mq] of Object.entries(screen)) {
if (!mq || mq.matches) size = scr;
}
console.log(size);
}
您可以在此處查看工作演示。（如果使用桌面瀏覽器，請在新窗口中打開此鏈接，以便于調(diào)整大小。移動用戶可以旋轉(zhuǎn)設(shè)備。）
使用的示例有：
使用matchMedia API的主要優(yōu)點是：
- 它是事件驅(qū)動的，能夠高效地處理媒體查詢更改。
- 它使用與CSS相同的媒體查詢字符串。
缺點是：
- 處理兩個或多個媒體查詢需要更多的思考和代碼邏輯。
- 您可能需要在CSS和JavaScript代碼中復(fù)制媒體查詢字符串。如果不保持同步，這可能會導(dǎo)致錯誤。
為了避免媒體查詢不匹配，可以考慮在構(gòu)建系統(tǒng)中使用設(shè)計令牌。媒體查詢字符串在JSON（或類似）文件中定義，值在構(gòu)建時插入CSS和JavaScript代碼。
總之，matchMedia API可能是實現(xiàn)JavaScript媒體查詢的最有效、最實用的方法。它有一些怪癖，但在大多數(shù)情況下它是最好的選擇。
小結(jié)
固有的CSS大小選擇越來越可行，但媒體查詢?nèi)匀皇谴蠖鄶?shù)網(wǎng)站響應(yīng)性web設(shè)計的基礎(chǔ)。它們在處理更復(fù)雜的布局和用戶偏好（如明暗模式）時總是必需的。
盡可能將媒體查詢單獨保存到CSS。當(dāng)您別無選擇，只能進入JavaScript領(lǐng)域時，matchMedia API為JavaScript媒體查詢組件提供了額外的控制，這些組件需要額外的基于維度的功能。
網(wǎng)站標(biāo)題：在JavaScript中使用媒體查詢的教程
分享網(wǎng)址：http://www.fisionsoft.com.cn/article/djohhio.html
