当前位置：首页 > article >正文

JavaScript- 3.2 JavaScript实现不同显示器尺寸的响应式主题和页面

article 2025/8/19 5:51:06

本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。

HTML和CSS系列文章 已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！

点赞关注不迷路！您的点赞、关注和收藏是对小编最大的支持和鼓励！

系列文章目录

JavaScript- 1.1 行内、内部、外部三种引用方式

JavaScript- 1.2 ECMA基本语法和控制流

JavaScript- 1.3 DOM对页面内容进行操作

JavaScript- 1.4 BOM对浏览器进行操作

JavaScript- 1.5 数据类型+变量+运算符

JavaScript- 1.6 基本控制流

JavaScript- 2.1 系统函数和自定义函数

JavaScript- 2.2 内置对象MATH

JavaScript- 2.3 内置对象String

JavaScript- 2.4 内置对象Date

JavaScript- 2.5 内置对象ARRAY

JavaScript- 2.6 数组应用

JavaScript- 2.7 二维数组

JavaScript- 3.1 定时器函数 window.settimeout & window.settinterval

JavaScript- 3.2 JavaScript实现不同显示器尺寸的响应式主题和页面

JavaScript- 4.1 DOM-document对象

系列文章目录

前言

一、JavaScript实现不同显示器尺寸的响应式主题和页面

1. 使用CSS媒体查询（推荐基础方案）

2. 纯JavaScript实现

方法一：使用window.matchMedia()

方法二：使用ResizeObserver（现代浏览器）

3. 动态加载不同资源

4. 结合CSS变量和JavaScript

5. 使用CSS框架的响应式工具

6.最佳实践建议

二、代码实践

1、获取屏幕大小

2、屏幕的高度和宽度不同时，显示不同的页面

3、屏幕的高度和宽度不同时，打印不同的内容

总结

前言

小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！

一、JavaScript实现不同显示器尺寸的响应式主题和页面

在JavaScript中，可以通过检测视口(viewport)大小来实现针对不同显示器尺寸应用不同的主题和页面布局。以下是几种实现方法：

1. 使用CSS媒体查询（推荐基础方案）

虽然这不是纯JavaScript方案，但通常是首选方法：

css

/* 默认主题 - 移动设备 */
:root {--primary-color: #4285f4;--background: #ffffff;--text-color: #333333;
}/* 中等屏幕 - 平板 */
@media (min-width: 768px) {:root {--primary-color: #34a853;--background: #f8f9fa;}
}/* 大屏幕 - 桌面 */
@media (min-width: 1024px) {:root {--primary-color: #ea4335;--background: #ffffff;}
}

2. 纯JavaScript实现

方法一：使用window.matchMedia()

javascript

function applyThemeBasedOnScreenSize() {const screenWidth = window.innerWidth;const body = document.body;// 移除所有现有主题类body.classList.remove('theme-mobile', 'theme-tablet', 'theme-desktop');if (screenWidth < 768) {body.classList.add('theme-mobile');// 可以在这里加载移动端特定的JS逻辑} else if (screenWidth >= 768 && screenWidth < 1024) {body.classList.add('theme-tablet');// 加载平板特定的JS逻辑} else {body.classList.add('theme-desktop');// 加载桌面特定的JS逻辑}
}// 初始应用
applyThemeBasedOnScreenSize();// 监听窗口大小变化
window.addEventListener('resize', applyThemeBasedOnScreenSize);

方法二：使用ResizeObserver（现代浏览器）

javascript

const observer = new ResizeObserver(entries => {for (let entry of entries) {const width = entry.contentRect.width;applyThemeBasedOnScreenSize(width);}
});observer.observe(document.body);function applyThemeBasedOnScreenSize(width) {// 实现与上面类似的逻辑
}

3. 动态加载不同资源

对于需要加载不同CSS或JS文件的情况：

javascript

function loadThemeResources() {const screenWidth = window.innerWidth;// 移除现有主题链接document.querySelectorAll('link[data-theme]').forEach(link => link.remove());let themeFile;if (screenWidth < 768) {themeFile = 'mobile-theme.css';} else if (screenWidth >= 768 && screenWidth < 1024) {themeFile = 'tablet-theme.css';} else {themeFile = 'desktop-theme.css';}// 动态加载CSSconst link = document.createElement('link');link.rel = 'stylesheet';link.href = themeFile;link.setAttribute('data-theme', 'true');document.head.appendChild(link);
}// 初始加载
loadThemeResources();// 监听窗口变化
window.addEventListener('resize', debounce(loadThemeResources, 200));// 防抖函数，避免频繁重绘
function debounce(func, wait) {let timeout;return function() {clearTimeout(timeout);timeout = setTimeout(func, wait);};
}

4. 结合CSS变量和JavaScript

更灵活的方案是使用CSS变量配合JavaScript：

javascript

// 定义不同屏幕尺寸的主题配置
const themes = {mobile: {primary: '#4285f4',background: '#ffffff',text: '#333333',layout: 'vertical'},tablet: {primary: '#34a853',background: '#f8f9fa',text: '#222222',layout: 'grid'},desktop: {primary: '#ea4335',background: '#ffffff',text: '#111111',layout: 'horizontal'}
};function applyTheme() {const screenWidth = window.innerWidth;let theme;if (screenWidth < 768) {theme = themes.mobile;} else if (screenWidth >= 768 && screenWidth < 1024) {theme = themes.tablet;} else {theme = themes.desktop;}// 应用CSS变量const root = document.documentElement;Object.keys(theme).forEach(key => {root.style.setProperty(`--${key}`, theme[key]);});// 根据布局调整页面结构applyLayout(theme.layout);
}function applyLayout(layout) {// 实现布局调整逻辑console.log(`Applying ${layout} layout`);
}// 初始应用和监听
applyTheme();
window.addEventListener('resize', debounce(applyTheme, 200));

5. 使用CSS框架的响应式工具

如果你使用Bootstrap等框架，可以利用其内置的响应式工具：

javascript

// 使用Bootstrap的断点检测
function isMobile() {return window.matchMedia('(max-width: 767px)').matches;
}function isTablet() {return window.matchMedia('(min-width: 768px) and (max-width: 1023px)').matches;
}function isDesktop() {return window.matchMedia('(min-width: 1024px)').matches;
}// 根据设备类型执行不同逻辑
if (isMobile()) {// 移动端逻辑
} else if (isTablet()) {// 平板逻辑
} else if (isDesktop()) {// 桌面逻辑
}

6.最佳实践建议

移动优先：先设计移动端体验，再逐步增强大屏幕体验
使用CSS媒体查询为主：尽可能用CSS解决布局问题，JS用于复杂逻辑
防抖处理：resize事件频繁触发，务必使用防抖
考虑服务器端渲染：对于关键内容，可在服务器端根据设备类型返回不同HTML
测试实际设备：不要仅依赖浏览器缩放，在实际设备上测试

通过以上方法，你可以创建适应不同显示器尺寸的响应式主题和页面布局。

二、代码实践

1、获取屏幕大小

HTML

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>BOM--navigator\screen</title></head><body><script type="text/javascript">console.log(navigator.appName);console.log(navigator.appCodeName);console.log(screen.width);console.log(screen.height);console.log(screen.availHeight);</script></body>
</html>

代码运行如下：

2、屏幕的高度和宽度不同时，显示不同的页面

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>不同大小的显示器不同主题</title></head><body><script type="text/javascript">var h,w;h=screen.availHeight;w=screen.availWidth;// test1 当屏幕的高度和宽度不同时，显示不同的页面if(h>800 && w>1200){console.log(location.href);location.href="js3-4.html";}else{location.href="js3-5.html";}//test2 当屏幕的高度和宽度不同时，打印不同的内容// if(h > 800 && w > 1200) {// 	console.log("高度大于800且宽度大于1200");// 				// 	} else {// 	console.log("高度小于等于800或宽度小于等于1200");// 				// 	}</script></body>
</html>

代码运行如下：

可以看到高度小于800，且宽度也小于1200，显示 js3-5.html

这里如果把两个条件调换，可以看到变成了js3-4.html页面

3、屏幕的高度和宽度不同时，打印不同的内容

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>不同大小的显示器不同主题</title></head><body><script type="text/javascript">var h,w;h=screen.availHeight;w=screen.availWidth;// test1 当屏幕的高度和宽度不同时，显示不同的页面// if(h>800 && w>1200){// 	console.log(location.href);// 	location.href="js3-5.html";// 	// location.href="js3-4.html";// 	}// else{// 		// location.href="js3-5.html";// 		location.href="js3-4.html";// 	}// test2 当屏幕的高度和宽度不同时，打印不同的内容if(h > 800 && w > 1200) {console.log("高度大于800且宽度大于1200");} else {console.log("高度小于等于800或宽度小于等于1200");}</script></body>
</html>

代码运行如下：