JavaScript的自适应效果

文章目录

浏览器的自适应
[1. rem ------ 动态设置根字号](#1. rem —— 动态设置根字号)
- rem是什么
- [JS 中如何操作](#JS 中如何操作)
[2. @media ------ 在 JS 中监听媒体查询](#2. @media —— 在 JS 中监听媒体查询)
- @media是什么
- [JS 中如何操作](#JS 中如何操作)
[3. meta 标签（viewport）------ JS 动态控制视口](#3. meta 标签（viewport）—— JS 动态控制视口)
- meta标签是什么
- [JS 中如何操作](#JS 中如何操作)

浏览器的自适应

点击红框中1的内容，在像图中选择iPhone XR，布局自适应到iPhone XR。

1. rem ------ 动态设置根字号

rem是什么

rem（root em）是相对于根元素 <html> 的 font-size 计算的单位。浏览器默认根字号通常是 16px，那么 1rem = 16px。如果我们在 CSS 里大量使用 rem 作为尺寸单位，只需改变根字号，整个页面就会等比例缩放。

JS 中如何操作

通过 JavaScript 动态计算并设置 <html> 的 font-size，就能让页面根据屏幕宽度自适应。这就是经典 flexible 方案的核心思路。

bash 复制代码

function setRem() {
  // 设计稿宽度（比如 750px），分成 10 份，1rem = 75px
  const baseWidth = 750;
  const baseSize = baseWidth / 10; // 75
  // 获取当前视口宽度
  const clientWidth = document.documentElement.clientWidth || window.innerWidth;
  // 限制最大宽度（平板等大屏保持固定比例）
  const maxWidth = 750;
  const width = Math.min(clientWidth, maxWidth);
  // 计算根字号
  const fontSize = (width / baseWidth) * baseSize;
  document.documentElement.style.fontSize = fontSize + 'px';
}

// 初始设置
setRem();
// 监听屏幕旋转、窗口大小变化
window.addEventListener('resize', setRem);
window.addEventListener('pageshow', function(e) {
  if (e.persisted) setRem(); // 浏览器前进后退时重新计算
});

之后在 CSS 中就可以用 rem 写尺寸了（通常配合 PostCSS 的 pxtorem 插件自动把设计稿像素转为 rem）。

2. @media ------ 在 JS 中监听媒体查询

@media是什么

CSS 的 @media 规则可以根据设备特性（宽度、高度、分辨率、方向等）应用不同样式，例如：

bash 复制代码

@media (max-width: 768px) {
  .sidebar { display: none; }
}

JS 中如何操作

在 JS 里，可以使用 window.matchMedia() 来检测或监听媒体查询状态的变化。它返回一个 MediaQueryList 对象，不仅可以判断当前是否匹配，还能绑定监听函数。

bash 复制代码

// 判断是否为移动端（屏幕宽度 ≤ 768px）
const mobileQuery = window.matchMedia('(max-width: 768px)');

function handleMobileChange(e) {
  if (e.matches) {
    console.log('进入移动端布局');
    // 执行移动端专属逻辑，如初始化移动端菜单
  } else {
    console.log('进入桌面端布局');
  }
}

// 初次检测
handleMobileChange(mobileQuery);
// 监听变化（窗口缩放、横竖屏切换时触发）
mobileQuery.addEventListener('change', handleMobileChange);

常见的用途：根据断点动态加载不同资源、控制组件的显隐或行为（比如 PC 端展示悬浮菜单，移动端换成抽屉菜单）。

3. meta 标签（viewport）------ JS 动态控制视口

meta标签是什么

在移动端开发中，用来控制布局视口的宽度和缩放行为，是最重要的一个标签。

bash 复制代码

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

width=device-width：让视口宽度等于设备独立像素宽度。

initial-scale：初始缩放比例。

maximum-scale、user-scalable：控制是否允许用户缩放（通常为了减少误触会禁止，但会影响无障碍体验，需权衡）。

JS 中如何操作

我们可以通过 JS 获取并动态修改这个 meta 标签，在特殊场景下调整缩放或适配。

bash 复制代码

// 获取 viewport meta
const viewport = document.querySelector('meta[name=viewport]');

// 方案1：动态设置缩放比例（比如 flexible 旧方案处理高清屏）
if (viewport) {
  // 根据设备像素比动态缩放
  const dpr = window.devicePixelRatio || 1;
  const scale = 1 / dpr;
  viewport.setAttribute('content', 
    `width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no`
  );
}

// 方案2：在某些情况下临时允许用户缩放
function enableZoom() {
  viewport.setAttribute('content', 
    'width=device-width, initial-scale=1.0'
  );
}

function disableZoom() {
  viewport.setAttribute('content', 
    'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'
  );
}