Question

body {
   margin:0;
   padding:0;
   box-sizing:border-box;
}

.about-title {
    background-color: #fc0321;
    color:#ffffff;
    padding: 5px;
    font-family: 'PT Sans Narrow', sans-serif;
    font-weight: 400;
    text-align: center;
    border-radius: 100px;
}

@media only screen and (max-width:400px) {
    .about {
        width:100%;
    }
}

<div class="about">
  <h3 class="about-title">Welcome to Mahasakthi Harvester Spares</h3>
  <p style="font-weight: 200;">MAHASAKTHI HARVESTER SPARES, established in the year 2017 by high end professionals in the field of Combine Harvester Manufacturing and Repairing. We are leading wholesaler, retailer and manufacturer of combine harvester spares dealing in Standard,Balkar,Kartar,Preet and Claas Combine Harvesters.Our Product ranges from Machined spares, Fabricated spares, sheet metal spares, Rubber spares,Shafts,Bearings,Belts, Oils ,Grease,Filters,Rubber Tracks,Rollers,Sprockets to all miniature spares.</p>
  <a href="#" class="about-button">Read More...</a>
</div>

在上面的代码中，我尝试了响应式设计，但没有得到。我提到台式机屏幕的宽度为87％，然后将较小的屏幕的宽度更改为100％。但是宽度没有改变。对此我遇到了麻烦。

Answer 1

<head>
  <style>
    body {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .about-title {
      background-color: #fc0321;
      color: #ffffff;
      padding: 5px;
      font-family: 'PT Sans Narrow', sans-serif;
      font-weight: 400;
      text-align: center;
      border-radius: 100px;
    }
      //--------------
    .about {
       width: 87%
       }
     //--------------
    @media only screen and (max-width:400px) {
      .about {
        width: 100%;
      }
    }
  </style>
</head>

您没有在代码中写入默认宽度值

Answer 2

这是@AFF在片段中所做的示例。如您所见，它正在工作。如果仍然存在问题，则可能是一些冲突的CSS覆盖了CSS。请尝试使用width:85%设置桌面宽度来重现您在代码段中遇到的问题，以便我们为您解决特定问题。

如果看到此工作示例有助于解决您的问题，请接受@AFF答案。

body {
   margin:0;
   padding:0;
   box-sizing:border-box;
}

.about-title {
    background-color: #fc0321;
    color:#ffffff;
    padding: 5px;
    font-family: 'PT Sans Narrow', sans-serif;
    font-weight: 400;
    text-align: center;
    border-radius: 100px;
}

.about {
 width:85%;
}

@media only screen and (max-width:400px) {
    .about {
        width:100%;
    }
}

<div class="about">
  <h3 class="about-title">Welcome to Mahasakthi Harvester Spares</h3>
  <p style="font-weight: 200;">MAHASAKTHI HARVESTER SPARES, established in the year 2017 by high end professionals in the field of Combine Harvester Manufacturing and Repairing. We are leading wholesaler, retailer and manufacturer of combine harvester spares dealing in Standard,Balkar,Kartar,Preet and Claas Combine Harvesters.Our Product ranges from Machined spares, Fabricated spares, sheet metal spares, Rubber spares,Shafts,Bearings,Belts, Oils ,Grease,Filters,Rubber Tracks,Rollers,Sprockets to all miniature spares.</p>
  <a href="#" class="about-button">Read More...</a>
</div>

响应式CSS设计遇到问题

2 个答案: