如何移除HTML原生dialog自定义宽高，适配不同屏幕？

问题出在原生<dialog>元素的浏览器默认样式上——你用unset/auto/initial时，并没有完全还原它的默认布局行为。原生dialog默认使用width: fit-content（不同浏览器可能带前缀，比如Chrome的-webkit-fit-content）自适应内容宽度，同时靠margin: auto实现居中，而unset只会把宽高重置为CSS初始值auto，和dialog的原生样式逻辑有差异。

给你两个可行的解决方法：

方法1：用revert恢复浏览器默认样式 #

revert关键字会直接让属性回到浏览器的UA默认样式，完美匹配dialog的原生布局：

dialog {
  width: 100dvw;
  height: 100dvh;
}

@media (min-width: 700px) {
  dialog {
    width: revert;
    height: revert;
  }
}

方法2：明确设置自适应宽高 #

直接指定宽高为fit-content，同时保留默认居中的margin：

dialog {
  width: 100dvw;
  height: 100dvh;
}

@media (min-width: 700px) {
  dialog {
    width: fit-content;
    height: fit-content;
    /* 可选：原生dialog默认已有此样式，确保居中时可保留 */
    margin: auto;
  }
}

测试后两种方法都能让大屏下的dialog回到自适应内容的默认状态，同时小屏保持全屏效果。

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