如何删除html原生对话框的宽度

发布于04月17日

我想在小屏幕中以全宽和全高显示对话框. 这似乎有效. 然而，当我try 在更大的屏幕中删除宽度和高度(通过使用未设置、自动或初始化)时，它不起作用. 有办法做到这一点吗？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      dialog {
        width: 100dvw;
        height: 100dvh;
      }

      @media (min-width: 700px) {
        dialog {
          width: unset;
          height: unset;
        }
      }
    </style>
  </head>
  <body>
    <dialog open>Hello!</dialog>
  </body>
</html>

推荐答案

使用revert将属性重置回UC样式.unset将其设置回初始默认值，即填充容器宽度的auto.

按照spec对话框的宽度和高度应设置为fit-content，如下所示.

dialog {
  position: absolute;
  inset-inline-start: 0; inset-inline-end: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
  border: solid;
  padding: 1em;
  background-color: Canvas;
  color: CanvasText;
}

我不确定Safari使用什么值，但revert应该将其恢复为它正在使用的任何值，这样它会在您设置小屏幕的宽度之前执行默认行为.

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

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

<dialog open>Hello!</dialog>

Html相关问答推荐

关于角内按钮范围的混乱

Chrome中是否有一个本地显示密码功能，用于`input type = password/`？""<"">

Font Awesome 6插入符号未显示

如何将FlexBox项目zoom 到其包含图像的大小

只有一行上有溢出的CSS网格

输入宽度在表格显示上不起作用FLEX溢出隐藏Firefox

如何阻止Chromecast图标出现在HTML5视频

在<；style&>中列出的三种字体中，只有两种显示

Style=背景图像URL引用变成&；Quot；

CSS中的转换属性是如何工作的？

如何在小屏幕中制作水平滚动div

为什么一个 CSS 网格框比其他网格框低？

如何围绕中心zoom svg 并使父级达到其子级大小的 100%

为什么盒子不在div中显示？

如何在 flex 项目中忽略子元素的宽度

文本溢出：省略号不适用于 flexbox

如何让 backdrop-filter： blur() 效果在 iOS 上运行？

Tailwind CSS 复选框样式不起作用

如果不透明的元素出现在下方，为什么不透明度会使一个元素出现在另一个元素上方？

动态使用时波浪号不转换为绝对路径

实用课程推荐