在Ubuntu系統中，使用JavaScript實現響應式設計通常涉及以下幾個方面：
視口設置：
在HTML文件的<head>部分添加<meta>標簽來設置視口，確保頁面在不同設備上正確縮放。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
媒體查詢： 使用CSS媒體查詢來根據不同的屏幕尺寸應用不同的樣式。
/* 默認樣式 */
body {
font-size: 16px;
}
/* 小屏幕設備 */
@media (max-width: 600px) {
body {
font-size: 14px;
}
}
/* 大屏幕設備 */
@media (min-width: 1200px) {
body {
font-size: 18px;
}
}
JavaScript動態調整： 使用JavaScript來動態調整頁面元素的大小或布局。
function adjustLayout() {
const width = window.innerWidth;
const element = document.getElementById('responsive-element');
if (width < 600) {
element.style.fontSize = '14px';
} else if (width >= 600 && width < 1200) {
element.style.fontSize = '16px';
} else {
element.style.fontSize = '18px';
}
}
// 監聽窗口大小變化事件
window.addEventListener('resize', adjustLayout);
// 初始化調整
adjustLayout();
Flexbox和Grid布局： 使用CSS Flexbox和Grid布局來創建靈活的布局，這些布局方式可以自動適應不同屏幕尺寸。
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 1 200px; /* 每個項目至少200px寬，并且可以增長和收縮 */
}
REM單位：
使用REM單位來設置字體大小和其他尺寸，REM單位是相對于根元素（<html>）的字體大小。
html {
font-size: 16px;
}
body {
font-size: 1rem; /* 16px */
}
@media (max-width: 600px) {
html {
font-size: 14px;
}
}
@media (min-width: 1200px) {
html {
font-size: 18px;
}
}
通過結合這些技術，你可以在Ubuntu系統中使用JavaScript實現響應式設計，確保你的網頁在不同設備上都能良好地顯示和使用。
