无法使我的 div 标签移动响应答案

【问题标题】：Cannot make my div tag mobile responsive无法使我的 div 标签移动响应
【发布时间】：2017-03-26 16:51:00
【问题描述】：

我正在使用优惠券代码构建一个网站，到目前为止，我对它在桌面上的外观感到满意，但是当我在智能手机上查看它时，它看起来很糟糕。我想要实现的是让这个 div 在智能手机中显示 100% 宽，而在桌面视图中保持 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 在桌面上看起来不错，但在较小的屏幕上很难看。感谢你的帮助！

【问题讨论】：

标签： html css wordpress responsive-design

【解决方案1】：

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

【讨论】：

【解决方案2】：

从.couponr 标记中删除完整的style 属性，并将类似这样的内容写入您的CSS 样式表：

.couponr {
  width: 70%; 
  padding: 10px; 
  text-align: center; 
  border: 5px dashed red; 
  margin:auto;
}

@media screen and (max-width: 480px) {
 .couponr {
   width: 100%;
 }
}

P.S.：.coupnr 标记将是

<div class="couponr">

（即没有style 属性）

【讨论】：

【解决方案3】：

没有什么只是从您的优惠券 div 中删除您的宽度，您将获得响应式自动宽度。在您的网站上。

<div class="couponr" style="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>

【讨论】：