Html 如何使此代码具有响应性

我如何使其响应。我在一个单页响应的网站上工作，我已经替换了提交按钮的代码。在桌面视图中，它可以正常工作。当我在手机中查看时，我看不到提交按钮

<div style="padding-left: 500px" class="bt-contact">
  <input style="width: 130px" class="des-button-dark des-button-dark-1 des-button-dark-1d" id="button-s"  name="submit" type="submit" value="Submit" >
</div>

---

您需要使用媒体查询：

/* Style applied everywhere */
.bt-contact input {
  width: 130px
}
@media screen and (min-width: 800px) {
  /* Style applied if your screen is larger than 800px */
  .bt-contact {
    padding-left: 500px;
  }
}

---

为了创建响应性站点，请使用%而不是px表示所有内容。如果您仍然没有得到响应，请使用css媒体查询。

您需要在css中添加媒体，了解如何将媒体添加到css中，并使您的网站具有响应性

/*------------------------------------------
Responsive Grid Media Queries - 1280, 1024, 768, 480
1280-1024   - desktop (default grid)
 1024-768    - tablet landscape
768-480     - tablet 
 480-less    - phone landscape & smaller
 --------------------------------------------*/
@media all and (min-width: 1024px) and (max-width: 1280px) { }

@media all and (min-width: 768px) and (max-width: 1024px) { }

@media all and (min-width: 480px) and (max-width: 768px) { }

@media all and (max-width: 480px) { }


/* Portrait */
@media screen and (orientation:portrait) { /* Portrait styles here */ }
/* Landscape */
@media screen and (orientation:landscape) { /* Landscape styles here */ }


/* CSS for iPhone, iPad, and Retina Displays */

/* Non-Retina */
@media screen and (-webkit-max-device-pixel-ratio: 1) {
}

/* Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
}

/* iPhone Portrait */
 @media screen and (max-device-width: 480px) and (orientation:portrait) {
} 

/* iPhone Landscape */
@media screen and (max-device-width: 480px) and (orientation:landscape) {
}

/* iPad Portrait */
@media screen and (min-device-width: 481px) and (orientation:portrait) {
}

 /* iPad Landscape */
@media screen and (min-device-width: 481px) and (orientation:landscape) {
}

---

你只需要检查你想把哪种分辨率和特定的CSS转换成那个媒体。您需要使用更多的inspect元素进行测试。还有一件事，您还可以使用百分比作为填充或边距，以便根据DOM的宽度调整按钮。

尝试使用媒体查询。.我怀疑左填充：500px是导致问题的原因

查看此链接

---

你不能这样问代码。在寻求帮助之前，你需要展示自己为解决问题所做的合理努力。请参阅。CodeReview的可能帖子？我们对流体布局使用百分比。一个有响应的布局会使用媒体查询，但不一定是%s。非常感谢（用%s表示所有内容，而不是用px表示。如果仍然没有得到响应，请使用css媒体查询。）它可以工作fine@PoovarasanRK请确保不要为一台设备添加介质。你们必须检查一下你们的需求是否有问题。使用chrome进行开发。

/*------------------------------------------
Responsive Grid Media Queries - 1280, 1024, 768, 480
1280-1024   - desktop (default grid)
 1024-768    - tablet landscape
768-480     - tablet 
 480-less    - phone landscape & smaller
 --------------------------------------------*/
@media all and (min-width: 1024px) and (max-width: 1280px) { }

@media all and (min-width: 768px) and (max-width: 1024px) { }

@media all and (min-width: 480px) and (max-width: 768px) { }

@media all and (max-width: 480px) { }


/* Portrait */
@media screen and (orientation:portrait) { /* Portrait styles here */ }
/* Landscape */
@media screen and (orientation:landscape) { /* Landscape styles here */ }


/* CSS for iPhone, iPad, and Retina Displays */

/* Non-Retina */
@media screen and (-webkit-max-device-pixel-ratio: 1) {
}

/* Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
}

/* iPhone Portrait */
 @media screen and (max-device-width: 480px) and (orientation:portrait) {
} 

/* iPhone Landscape */
@media screen and (max-device-width: 480px) and (orientation:landscape) {
}

/* iPad Portrait */
@media screen and (min-device-width: 481px) and (orientation:portrait) {
}

 /* iPad Landscape */
@media screen and (min-device-width: 481px) and (orientation:landscape) {
}

@media screen and (max-width: 420px) { /*According to mobile size you can change the width*/
    .bt-contact{
        padding-left: 100px;/* give some less px value */
    }
}