视口单元是否应该在阴影 DOM 中响应？答案

【问题标题】：Should viewport units be responsive in the shadow DOM?视口单元是否应该在阴影 DOM 中响应？
【发布时间】：2020-08-13 16:55:26
【问题描述】：

在 Safari 中，我认为应用于 shadow DOM 中元素的视口单元（例如 vw）实际上不会响应视口的更改。他们应该吗？

在下面的演示中，浅蓝色<main> 元素和危险条纹<div> 的宽度都设置为50vw。在 Chrome、Firefox、Edge 和 Opera 中，这些元素的大小与我扩大和缩小视口的大小相同，而在 Safari 中，<div> 保持其开始时的大小。

const shadow = document.querySelector('.shadow-root').attachShadow({ mode: 'open' });

const style = document.createElement('style');
style.innerText = `
div {
  width: 50vw;
  height: 100px;
  background-image: repeating-linear-gradient(-45deg, #333 0, #333 10px, #fc0 10px, #fc0 20px);
}`;

shadow.appendChild(style);
shadow.appendChild(document.createElement('div'));

body {
  margin: 0;
}

main {
  margin: 0 auto;
  width: 50vw;
  height: 100vh;
  background-color: lightblue;
}

&lt;main class="shadow-root"&gt;&lt;/main&gt;

【问题讨论】：

标签： javascript css safari shadow-dom viewport-units

【解决方案1】：

是的，他们应该这样做。

这是 Safari 的一次重大失败。

解决方法：可以通过在阴影字体大小中使用 rem 单位并将字体大小设置为 html 上的 vh/vw 单位来实现动态调整大小。

【讨论】：