建站
咨詢
售后
建站咨詢
新聞中心
網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(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)頁設(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è)頁面布局，而期望它在任何地方都能工作。
當(dāng)手機(jī)在21世紀(jì)初首次獲得基本的web訪問時(shí)，網(wǎng)站所有者通常會(huì)創(chuàng)建兩到三個(gè)單獨(dú)的頁面模板，松散地基于手機(jī)和桌面視圖。隨著設(shè)備種類呈指數(shù)級(jí)增長，這種做法變得越來越不切實(shí)際。
今天，有許多屏幕尺寸，從微型手表顯示器到巨大的8K顯示器甚至更大。即使你只考慮手機(jī)，最近的設(shè)備可以比許多低端筆記本電腦具有更高的分辨率。
移動(dòng)設(shè)備的使用量也超過了臺(tái)式電腦。除非你的網(wǎng)站有一組特定的用戶，否則你可以期望大多數(shù)人通過智能手機(jī)訪問它。盡管大多數(shù)網(wǎng)頁設(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)重要，但加載速度慢、無法適應(yīng)用戶群屏幕尺寸的網(wǎng)站可能會(huì)損害您的業(yè)務(wù)。
最后，考慮可訪問性。一個(gè)適合所有人的網(wǎng)站，無論他們使用什么設(shè)備，都會(huì)吸引更多的觀眾?？稍L問性是許多國家的法律要求，但即使不是你所在的地方，也要考慮到更多的觀眾會(huì)帶來更多的轉(zhuǎn)換和更高的盈利能力。
響應(yīng)式設(shè)計(jì)如何工作？
響應(yīng)式設(shè)計(jì)的基礎(chǔ)是媒體查詢：一種CSS技術(shù)，可以根據(jù)輸出類型（屏幕、打印機(jī)甚至語音）、屏幕尺寸、顯示縱橫比、設(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ì)帶來好處（請(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ī)則來調(diào)整站點(diǎn)的布局。
媒體查詢最佳實(shí)踐
最初設(shè)計(jì)媒體查詢時(shí)，許多網(wǎng)站選擇了一套固定的布局。這在概念上更易于設(shè)計(jì)和編碼，因?yàn)樗行У貜?fù)制了一組有限的頁面模板。例如：
這項(xiàng)技術(shù)有缺陷。在非常小和非常大的屏幕上的結(jié)果可能看起來很差，并且隨著設(shè)備和屏幕尺寸的變化，可能需要CSS維護(hù)。
一個(gè)更好的選擇是使用帶有斷點(diǎn)的“移動(dòng)第一流體”設(shè)計(jì)，該斷點(diǎn)可以在特定大小下調(diào)整布局。本質(zhì)上，默認(rèn)布局使用最簡(jiǎn)單的小屏幕樣式，將元素定位在線性垂直塊中。
例如，和在容器內(nèi)：
/* default small-screen device */
main {
width: 100%;
}
article, aside {
width: 100%;
padding: 2em;
}
以下是所有瀏覽器的結(jié)果-即使是不支持媒體查詢的非常舊的瀏覽器：
不支持媒體查詢的示例屏幕截圖。
當(dāng)支持媒體查詢且屏幕超過特定寬度（例如500px）時(shí)，和元素可以水平放置。本例使用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è)計(jì)也可以在現(xiàn)代CSS中使用更新的屬性實(shí)現(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可以在元素開始超出可用空間時(shí)進(jìn)行換行或不換行。
- CSS網(wǎng)格元素可以使用比例分?jǐn)?shù)
fr單位調(diào)整大小。repeat CSS函數(shù)可以與minmax,auto-fit和auto-fill結(jié)合使用，以分配可用空間。 - 新的和（當(dāng)前）實(shí)驗(yàn)性的CSS容器查詢可以對(duì)布局中組件可用的部分空間作出反應(yīng)。
這些選項(xiàng)超出了本文的范圍，但它們通常比只能響應(yīng)屏幕尺寸的粗糙媒體查詢更實(shí)用。如果您可以在沒有媒體查詢的情況下實(shí)現(xiàn)布局，那么隨著時(shí)間的推移，它可能會(huì)使用更少的代碼，更高效，并且需要更少的維護(hù)。
也就是說，在某些情況下，媒體查詢?nèi)匀皇俏ㄒ豢尚械牟季诌x項(xiàng)。當(dāng)你需要考慮其他屏幕因素時(shí)，它們?nèi)匀皇潜夭豢缮俚?，比如縱橫比、設(shè)備方向、顏色深度、指針精度，或者用戶偏好，比如動(dòng)畫和光/暗模式。
您是否需要JavaScript中的媒體查詢？
到目前為止，我們主要討論CSS。這是因?yàn)榇蠖鄶?shù)布局問題都可以而且應(yīng)該單獨(dú)用CSS來解決。
但是，在某些情況下，使用JavaScript媒體查詢而不是CSS是可行的，例如：
- 諸如菜單之類的組件在小屏幕和大屏幕上具有不同的功能。
- 切換縱向/橫向會(huì)影響web應(yīng)用程序的功能。
- 基于觸摸的游戲必須更改
布局或調(diào)整控制按鈕。 - web應(yīng)用程序遵循用戶偏好，如暗/光模式、減少動(dòng)畫、觸摸粗糙度等。
以下部分演示了在JavaScript中使用媒體查詢或類似于媒體查詢的選項(xiàng)的三種方法。所有示例都返回一個(gè)狀態(tài)字符串，其中：
- 小視圖=寬度小于400像素的屏幕；
- 中視圖=寬度在400到799像素之間的屏幕；
- 大視圖=寬度為800像素或更多的屏幕。
選項(xiàng) 1：監(jiān)視視場(chǎng)維度
在媒體查詢實(shí)施之前的黑暗日子里，這是唯一的選擇。JavaScript將偵聽瀏覽器“調(diào)整大小”事件，使用window.innerWidth和window.innerHeight（或舊IE中的document.body.clientWidth和document.body.clientHeight）分析視口尺寸，并做出相應(yīng)的反應(yīng)。
此代碼將計(jì)算出的小、中或大字符串輸出到控制臺(tái)：
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);
}
您可以在此處查看工作演示。（如果使用桌面瀏覽器，請(qǐng)?jiān)谛麓翱谥写蜷_此鏈接，以便于調(diào)整大小。移動(dòng)用戶可以旋轉(zhuǎn)設(shè)備。）
上面的示例在調(diào)整瀏覽器大小時(shí)檢查視口大??；確定它是小型、中型還是大型；并將其設(shè)置為body元素上的類，從而更改背景顏色。
這種方法的優(yōu)點(diǎn)包括：
- 它可以在每一個(gè)可以運(yùn)行JavaScript的瀏覽器中運(yùn)行——甚至是古老的應(yīng)用程序。
- 您正在捕獲準(zhǔn)確的尺寸，并可以做出相應(yīng)的反應(yīng)。
缺點(diǎn)是：
- 這是一種需要大量代碼的老技術(shù)。
- 是不是太精確了？你真的需要知道寬度是966px還是967px嗎？
- 您可能需要手動(dòng)將維度匹配到相應(yīng)的CSS媒體查詢。
- 用戶可以快速調(diào)整瀏覽器大小，使處理程序功能每次都再次運(yùn)行。這會(huì)通過限制事件來重載較舊和較慢的瀏覽器。它只能每500毫秒觸發(fā)一次。
總之，除非有非常具體和復(fù)雜的大小調(diào)整要求，否則不要監(jiān)視視口尺寸。
選項(xiàng) 2：定義和監(jiān)視CSS自定義屬性（可變）
這是一種稍微不尋常的技術(shù)，它在觸發(fā)媒體查詢時(shí)更改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;
}
}
可以使用偽元素單獨(dú)在CSS中輸出該值（但請(qǐng)注意，它必須包含在單引號(hào)或雙引號(hào)中）：
p::before {
content: var(--screen);
}
您可以使用JavaScript獲取自定義屬性值：
const screen = getComputedStyle(window.body)
.getPropertyValue('--screen');
但這并不是全部，因?yàn)榉祷刂蛋珻SS中冒號(hào)后定義的所有空格和引號(hào)字符。字符串將為”large”，因此需要稍微整理一下：
// returns small, medium, or large in a string
const screen = getComputedStyle(window.body)
.getPropertyValue('--screen')
.replace(/\W/g, '');
您可以在此處查看工作演示。（如果使用桌面瀏覽器，請(qǐng)?jiān)谛麓翱谥写蜷_此鏈接，以便于調(diào)整大小。移動(dòng)用戶可以旋轉(zhuǎn)設(shè)備。）
該示例每?jī)擅腌姍z查一次CSS值。它需要一點(diǎn)JavaScript代碼，但需要輪詢更改—您無法使用CSS自動(dòng)檢測(cè)到自定義屬性值已更改。
也不可能將值寫入偽元素，并使用DOM變異觀察器檢測(cè)更改。偽元素不是DOM的“真實(shí)”部分！
優(yōu)點(diǎn)：
- 這是一種簡(jiǎn)單的技術(shù)，主要使用CSS并匹配真實(shí)的媒體查詢?？梢酝瑫r(shí)修改任何其他CSS屬性。
- 無需復(fù)制或解析JavaScript媒體查詢字符串。
主要缺點(diǎn)是無法自動(dòng)對(duì)瀏覽器視口尺寸的更改作出反應(yīng)。如果用戶將手機(jī)從縱向旋轉(zhuǎn)到橫向，JavaScript永遠(yuǎn)不會(huì)知道。您可以經(jīng)常輪詢更改，但這是低效的，并且會(huì)導(dǎo)致您在演示中看到的時(shí)間延遲。
監(jiān)視CSS自定義屬性是一種新穎的技術(shù)，但只有在以下情況下才實(shí)用：
- 布局可以固定在頁面最初呈現(xiàn)的位置。一個(gè)信息亭或銷售點(diǎn)終端是可能的，但它們可能有固定的分辨率和單一的布局，因此JavaScript媒體查詢變得無關(guān)緊要。
- 該網(wǎng)站或應(yīng)用程序已經(jīng)頻繁運(yùn)行基于時(shí)間的功能，如游戲動(dòng)畫。可以同時(shí)檢查自定義屬性，以確定是否需要更改布局。
選項(xiàng) 3： 使用matchMedia API
matchMedia API有點(diǎn)不同尋常，但它允許您實(shí)現(xiàn)JavaScript媒體查詢。IE10以上的大多數(shù)瀏覽器都支持它。構(gòu)造函數(shù)返回一個(gè)MediaQueryList對(duì)象，該對(duì)象的matches屬性針對(duì)其特定的媒體查詢計(jì)算為true或false。
當(dāng)瀏覽器視口寬度為800px或更大時(shí)，以下代碼輸出true：
const mqLarge = window.matchMedia( '(min-width: 800px)' ); console.log( mqLarge.matches );
“change”事件可應(yīng)用于MediaQueryList對(duì)象。每次matches屬性的狀態(tài)更改時(shí)都會(huì)觸發(fā)此操作：它在先前為false（低于800px）后變?yōu)閠rue（高于800px），反之亦然。
將MediaQueryList對(duì)象作為第一個(gè)參數(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屬性更改時(shí)運(yùn)行。當(dāng)頁面最初加載時(shí)，它不會(huì)運(yùn)行，因此您可以直接調(diào)用函數(shù)來確定啟動(dòng)狀態(tài)：
// initial state mqHandler(mqLarge);
當(dāng)您在兩個(gè)不同的狀態(tài)之間移動(dòng)時(shí)，API工作得很好。要分析三種或三種以上的狀態(tài)，如small, medium和large，需要更多的代碼。
首先用關(guān)聯(lián)的matchMedia對(duì)象定義屏幕狀態(tài)對(duì)象：
const
screen = {
small : null,
medium: window.matchMedia( '(min-width: 400px)' ),
large : window.matchMedia( '(min-width: 800px)' )
};
無需在small狀態(tài)上定義matchMedia對(duì)象，因?yàn)樵?strong>small和medium之間移動(dòng)時(shí)，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對(duì)象，以確定當(dāng)前是活動(dòng)的small、medium還是large。比賽必須按大小順序進(jìn)行，因?yàn)?99px的寬度可以匹配中型和大型-只有最大的才能“獲勝”：
// 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);
}
您可以在此處查看工作演示。（如果使用桌面瀏覽器，請(qǐng)?jiān)谛麓翱谥写蜷_此鏈接，以便于調(diào)整大小。移動(dòng)用戶可以旋轉(zhuǎn)設(shè)備。）
使用的示例有：
使用matchMedia API的主要優(yōu)點(diǎn)是：
- 它是事件驅(qū)動(dòng)的，能夠高效地處理媒體查詢更改。
- 它使用與CSS相同的媒體查詢字符串。
缺點(diǎn)是：
- 處理兩個(gè)或多個(gè)媒體查詢需要更多的思考和代碼邏輯。
- 您可能需要在CSS和JavaScript代碼中復(fù)制媒體查詢字符串。如果不保持同步，這可能會(huì)導(dǎo)致錯(cuò)誤。
為了避免媒體查詢不匹配，可以考慮在構(gòu)建系統(tǒng)中使用設(shè)計(jì)令牌。媒體查詢字符串在JSON（或類似）文件中定義，值在構(gòu)建時(shí)插入CSS和JavaScript代碼。
總之，matchMedia API可能是實(shí)現(xiàn)JavaScript媒體查詢的最有效、最實(shí)用的方法。它有一些怪癖，但在大多數(shù)情況下它是最好的選擇。
小結(jié)
固有的CSS大小選擇越來越可行，但媒體查詢?nèi)匀皇谴蠖鄶?shù)網(wǎng)站響應(yīng)性web設(shè)計(jì)的基礎(chǔ)。它們?cè)谔幚砀鼜?fù)雜的布局和用戶偏好（如明暗模式）時(shí)總是必需的。
盡可能將媒體查詢單獨(dú)保存到CSS。當(dāng)您別無選擇，只能進(jìn)入JavaScript領(lǐng)域時(shí)，matchMedia API為JavaScript媒體查詢組件提供了額外的控制，這些組件需要額外的基于維度的功能。
分享標(biāo)題：在JavaScript中使用媒體查詢的教程
網(wǎng)頁網(wǎng)址：http://www.5511xx.com/article/djohhio.html
