使用 Javascript 基于设备检测更改全局 td 属性答案

【问题标题】：Change global td attributes based on device detection using Javascript使用 Javascript 基于设备检测更改全局 td 属性
【发布时间】：2019-06-07 20:05:35
【问题描述】：

我认为这很容易做到，但我没有找到答案。我有这个样式表，它设置所有 td 的全局字体大小。

td {        
    font-size: 20px;  
}

我想在 javascript 中检测设备类型并全局更改 td 的值，因此移动设备上的字体大小更大。有没有办法以编程方式设置全局 td？我有设备检测工作。

【问题讨论】：

您可以使用 % 代替 px 或媒体查询
Getting the right font-size on every mobile device的可能重复
您可以使用vw 设置设备宽度或使用vh 设置设备高度。示例：font-size: 3vh。 CSS_Values_and_Units#Dimensions - MDN
噢，我不知道 vw 和 vh！我可能会走那条路，但是 javascript 中有没有办法在全局范围内更改 td 值，比如我点击了一个按钮？
@Jonathan 是在 javascript 中使用 .css 方法

标签： javascript html css

【解决方案1】：

有很多方法可以实现这一点。我个人喜欢使用media querys。

这是一个例子：

  td {
     font-size: 20px;
     }

@media screen and (max-width: 800px) {
  td {
     font-size: 10px;
  }
  }

<table class="table table-striped">
  <tbody>
    <tr class="warning">
      <td>Area</td>
    </tr>
  </tbody>
</table>

在这里你可以看到当你点击整页时它改变了font-size。您也可以使用vw 这将占用屏幕宽度的百分比。但是你必须添加一个视口

Example

【讨论】：

这确实有效，尽管我通过在标题中添加“in Javascript”来澄清问题。我一直在寻找的关键点之一是：“有没有办法以编程方式设置全局 td？”在Javascript中