如何用JavaScript实现HTML文本、表格响应式及动态正方形表格

嘿，我来帮你一步步解决这些响应式布局的问题！咱们逐个击破：

一、实现正方形表格：优先给单元格设置比例 #

你之前尝试给整个表格设置高度等于宽度，但可能因为表格的边框、内边距（padding）、或者单元格的默认布局规则，导致高宽不匹配。更可靠的方式是把正方形逻辑应用到每个单元格——毕竟表格的整体尺寸是由单元格撑起来的，确保每个单元格是正方形，整个N×N的表格自然会是完美的正方形。

推荐用CSS实现（更简洁，无需JS） #

直接给表格的单元格设置aspect-ratio: 1/1，这是CSS原生的宽高比属性，现代浏览器都支持：

table {
  width: 100%; /* 让表格自适应父容器宽度 */
  border-collapse: collapse; /* 避免边框间距影响尺寸 */
}
td {
  aspect-ratio: 1/1; /* 强制单元格宽高1:1 */
  border: 1px solid #ccc;
  padding: 0; /* 可选，避免内边距打乱比例 */
}

如果必须用JS实现（兼容旧浏览器） #

监听窗口 resize 事件，动态调整每个单元格的高度等于宽度：

function setSquareCells() {
  const cells = document.querySelectorAll('td');
  cells.forEach(cell => {
    const width = cell.offsetWidth;
    cell.style.height = `${width}px`;
  });
}

// 初始化执行
setSquareCells();
// 窗口 resize 时重新计算
window.addEventListener('resize', setSquareCells);

二、文本（字号）及其他元素的响应式适配 #

文本字号响应式 #

可以用以下几种灵活的方式：

• clamp()函数：自动在最小、理想、最大值之间适配，兼顾不同屏幕：

  td {
    font-size: clamp(0.8rem, 2vw, 1.2rem);
    /* 0.8rem是最小字号，2vw是基于视窗宽度的理想值，1.2rem是最大字号 */
  }
  

• vw单位：直接基于视窗宽度的百分比，比如1vw等于视窗宽度的1%：

  td {
    font-size: 1.5vw;
  }
  

• 媒体查询：针对不同屏幕断点设置固定字号，适合需要精确控制的场景：

  @media (max-width: 768px) {
    td { font-size: 0.9rem; }
  }
  @media (min-width: 1200px) {
    td { font-size: 1.1rem; }
  }
  

其他元素响应式 #

• 图片：给图片设置max-width: 100%; height: auto;，确保图片不会超出单元格，同时保持自身比例。
• 容器：用max-width代替固定宽度，或者用CSS Grid/Flexbox实现弹性布局，让容器自适应父元素的尺寸变化。

三、获取屏幕高度的60%作为最小值 #

CSS方式（最简单，无需JS） #

直接用vh单位（1vh等于视窗高度的1%），一行代码搞定：

table {
  min-height: 60vh; /* 表格最小高度为屏幕高度的60% */
}

JS方式（如果需要动态计算或结合其他逻辑） #

通过window.innerHeight获取屏幕高度，乘以0.6得到60%的数值：

const minHeight = window.innerHeight * 0.6;
table.style.minHeight = `${minHeight}px`;

// 同样监听resize事件，屏幕高度变化时更新最小值
window.addEventListener('resize', () => {
  const newMinHeight = window.innerHeight * 0.6;
  table.style.minHeight = `${newMinHeight}px`;
});

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