弹窗如何自动响应式

弹窗的自动响应式设计主要是指在不同尺寸和分辨率的设备上，弹窗能够自动调整大小和布局，以适应屏幕的尺寸。以下是一些实现弹窗自动响应式的方法：

HTML和CSS实现

1. 使用百分比和视口单位：

使用百分比（%）和视口宽度单位（vw/vh）来设置弹窗的宽度和高度，可以让弹窗在不同屏幕上自动调整大小。

```css

.modal {

width: 80vw;

height: 50vh;

position: fixed;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

background-color: white;

border: 1px solid ccc;

z-index: 1000;