网站平板适配遇问题：JS动态样式适配方案及@media知识求助

不用太纠结必须在CSS外定义适配逻辑——其实可以把媒体查询的判断逻辑和JavaScript结合，或者直接在JS里模拟媒体查询的行为，就能针对平板等设备调整你通过JS写入的样式值了。下面给你几个实用的方案：

方案1：在JS中直接检测屏幕宽度（最直接） #

你可以在执行样式写入的函数里，先判断当前屏幕的宽度，再根据不同宽度范围设置不同的样式值。平板通常的宽度范围是768px到1024px左右，你可以这样写：

function tmbl2() {
  var bkaTuttp2 = document.getElementById("mnu2");
  // 获取当前视口宽度
  var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
  
  // 针对平板设备（768px-1024px）设置样式
  if (viewportWidth >= 768 && viewportWidth <= 1024) {
    bkaTuttp2.style.width = "80%"; // 平板专属样式值
    bkaTuttp2.style.padding = "1rem";
  } 
  // 手机设备
  else if (viewportWidth < 768) {
    bkaTuttp2.style.width = "100%";
    bkaTuttp2.style.padding = "0.5rem";
  }
  // 桌面设备
  else {
    bkaTuttp2.style.width = "60%";
    bkaTuttp2.style.padding = "1.5rem";
  }
}

// 页面加载时执行一次
window.addEventListener('load', tmbl2);
// 窗口大小改变时重新执行，保证适配实时生效
window.addEventListener('resize', tmbl2);

这个方案的好处是不用依赖CSS媒体查询，直接在JS里完成判断，和你现有的JS写样式的逻辑完全兼容。

方案2：使用JS监听CSS媒体查询（更贴合CSS适配逻辑） #

如果你还是想沿用CSS中@media的思路，可以通过JS的matchMedia API来监听媒体查询的状态变化，当设备匹配平板的媒体查询时，再执行对应的样式调整：

// 定义平板的媒体查询规则
const tabletQuery = window.matchMedia('(min-width: 768px) and (max-width: 1024px)');

// 定义处理样式的函数
function handleTabletStyles(isTablet) {
  var bkaTuttp2 = document.getElementById("mnu2");
  if (isTablet) {
    // 平板下的样式
    bkaTuttp2.style.transform = "translateX(0)";
    bkaTuttp2.style.backgroundColor = "#f5f5f5";
  } else {
    // 非平板下的样式
    bkaTuttp2.style.transform = "translateX(-100%)";
    bkaTuttp2.style.backgroundColor = "#ffffff";
  }
}

// 初始加载时执行一次
handleTabletStyles(tabletQuery.matches);
// 监听媒体查询状态变化
tabletQuery.addEventListener('change', (e) => {
  handleTabletStyles(e.matches);
});

// 把这个逻辑整合到你的tmbl2函数里也可以
function tmbl2() {
  // 你的原有逻辑...
  handleTabletStyles(tabletQuery.matches);
}

这个方法的优势是和CSS的媒体查询规则保持一致，维护起来更统一，适合已经有一套CSS适配规则的场景。

方案3：用CSS类代替直接写样式（更推荐的最佳实践） #

其实我更建议你尽量避免用JS直接写样式值，而是通过JS给元素添加/移除不同的CSS类，然后在CSS里用媒体查询定义这些类的样式。这样样式和逻辑分离，后期维护更方便：

第一步：在CSS中定义适配类的样式 #

/* 默认样式 */
#mnu2 {
  width: 60%;
  padding: 1.5rem;
}

/* 平板设备适配 */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .menu-tablet {
    width: 80%;
    padding: 1rem;
  }
}

/* 手机设备适配 */
@media only screen and (max-width: 767px) {
  .menu-mobile {
    width: 100%;
    padding: 0.5rem;
  }
}

第二步：在JS中根据屏幕宽度添加/移除类 #

function tmbl2() {
  var bkaTuttp2 = document.getElementById("mnu2");
  var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
  
  // 先移除所有适配类
  bkaTuttp2.classList.remove('menu-tablet', 'menu-mobile');
  
  // 根据宽度添加对应类
  if (viewportWidth >= 768 && viewportWidth <= 1024) {
    bkaTuttp2.classList.add('menu-tablet');
  } else if (viewportWidth < 768) {
    bkaTuttp2.classList.add('menu-mobile');
  }
  // 桌面设备用默认样式，不用加类
}

// 同样绑定加载和 resize 事件
window.addEventListener('load', tmbl2);
window.addEventListener('resize', tmbl2);

这种方式把样式逻辑完全交给CSS，JS只负责控制类的切换，代码更清晰，也符合前端开发的最佳实践，后期要调整样式直接改CSS就行，不用动JS。

你可以根据自己的现有代码情况选择合适的方案，要是你的tmbl2函数里还有其他逻辑，直接把上面的判断逻辑整合进去就好。

内容的提问来源于stack exchange，提问作者Yudha Swarna