RWD 網頁設計（九）：RWD 與 JavaScript 動態互動

2025年4月13日 rwdweb

前言

光靠 CSS 可以做出大部分 RWD 效果，但如果想讓網頁互動性更高、內容能隨螢幕動態變化，就需要結合 JavaScript！本章會介紹幾個常見的 RWD 動態技巧，讓你的網站不只能「響應」，還能「互動」。

一、監測與響應視窗尺寸變化

有時候我們需要根據視窗寬度切換不同內容或元件，這時可以用 JavaScript 監聽視窗變化。

1. window.resize 事件

window.addEventListener('resize', function() {
 if (window.innerWidth < 600) {
   document.body.classList.add('mobile');
 } else {
   document.body.classList.remove('mobile');
 }
});

這樣就能在螢幕變窄時自動加上 mobile 樣式。

2. matchMedia API

更進階的做法，可以直接用 CSS 媒體查詢語法判斷：

const mq = window.matchMedia('(max-width: 600px)');
mq.addEventListener('change', function(e) {
 if (e.matches) {
   // 進入手機模式
 } else {
   // 回到桌機模式
 }
});

這樣就能在螢幕變窄時自動加上 mobile 樣式。

二、動態載入與懶加載

** 為了提升效能，圖片或內容可以等到用戶真的要看時才載入。**

Intersection Observer 實現圖片/內容懶加載

const imgs = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries, obs) => {
 entries.forEach(entry => {
   if (entry.isIntersecting) {
     entry.target.src = entry.target.dataset.src;
     obs.unobserve(entry.target);
   }
 });
});
imgs.forEach(img => observer.observe(img));

這樣圖片只有進入視窗時才會載入。

三、裝置特性偵測與優化

針對不同裝置（如觸控螢幕）可以做額外優化。

1. 判斷觸控裝置

function isTouchDevice() {
 return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
}
if (isTouchDevice()) {
 document.body.classList.add('touch');
}

2. 針對觸控裝置優化按鈕大小

body.touch .btn {
 padding: 18px 32px;
 font-size: 1.2em;
}

這樣按鈕在觸控裝置上會更大，更易按。

四、JS 輔助 RWD 效果

有時候需要動態切換 CSS class 或內容，讓 RWD 更靈活。

1. 動態調整 CSS class、樣式切換

function toggleMenu() {
 document.querySelector('.nav').classList.toggle('open');
}

2. 行動版與桌機版導覽列切換

const mq = window.matchMedia('(max-width: 768px)');
function updateNav() {
 if (mq.matches) {
   // 切換到行動版導覽列
 } else {
   // 切換到桌機版導覽列
 }
}
mq.addEventListener('change', updateNav);
updateNav();