diff --git a/src/dialog/index.less b/src/dialog/index.less
index 08b7a9ba9..0448d3f55 100644
--- a/src/dialog/index.less
+++ b/src/dialog/index.less
@@ -14,6 +14,10 @@
   transition: @dialog-transition;
   transition-property: transform, opacity;
 
+  @media (max-width: 321px) {
+    width: @dialog-small-screen-width;
+  }
+
   &__header {
     padding-top: @dialog-header-padding-top;
     font-weight: @dialog-header-font-weight;
diff --git a/src/style/var.less b/src/style/var.less
index 5aa43a72c..165d03510 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -236,7 +236,8 @@
 @coupon-list-empty-tip-line-height: 20px;
 
 // Dialog
-@dialog-width: 85%;
+@dialog-width: 320px;
+@dialog-small-screen-width: 90%;
 @dialog-font-size: @font-size-lg;
 @dialog-transition: @animation-duration-base;
 @dialog-border-radius: @border-radius-md;