html - 无法使我的 div 标签移动响应

Question

我正在构建一个带有优惠券代码的网站，到目前为止，我对它在桌面上的外观感到满意，但在我的智能手机上查看它时，它看起来很糟糕。我想要实现的是让这个 div 在智能手机中显示 100% 的宽度，同时在桌面 View 中保持 70% 的宽度。这是我使用的代码:

 <div class="couponr" style="width: 80%; padding: 10px; text-align: center; border: 5px dashed red; margin:auto ">  
   <h3>
   <span style="background-color:#ffffff;"><strong>HELLOCAVITE</strong></span>
  </h3>
  <hr />
  <h3>
    P100 Off on 5 Rides!
  </h3>     
   Copy the coupon above at checkout to redeem P100 off from Uber.
 </div>

查看此示例输出 here它在桌面上看起来不错，但在较小的屏幕上看起来很丑。感谢你的帮助!

Answer 1

您需要使用基于网格的布局，选择您的内容在不同屏幕上的显示方式。您可以为此使用 Bootstrap 或基础，也可以创建自己的基于网格的布局。详细了解响应式网页设计。