如何使此代码具有响应性答案

【问题标题】：How to make this code as responsive如何使此代码具有响应性
【发布时间】：2015-04-24 07:07:04
【问题描述】：

如何使这个响应。我正在开发单页响应式网站，我已将此代码替换为提交按钮。在桌面视图中，它工作正常。当我在手机中查看它时，我看不到提交按钮。

<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>

【问题讨论】：

你不能问这样的代码。在寻求帮助之前，您需要展示自己为解决问题所做的合理努力。见How to Ask。
CodeReview 可以发帖吗？

标签： html css

【解决方案1】：

<html><head></head><body><div style="padding-left: 40%;" class="bt-contact">
  <input style="width:16%;min-width:160px" class="des-button-dark des-button-dark-1 des-button-dark-1d" id="button-s" name="submit" type="submit" value="Submit">
</div></body></html>

为了制作响应式网站，请以 % 而非 px 为单位提供所有内容。如果您仍然没有得到响应，请使用 css 媒体查询。

【讨论】：

我们对 fluid 布局使用百分比。响应式布局将使用媒体查询，但不一定使用百分比。
非常感谢（以 % 而非 px 提供所有内容。如果您仍然没有得到响应，请使用 css 媒体查询。）它的工作正常

【解决方案2】：

您需要使用媒体查询：

/* 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;
  }
}

【讨论】：

【解决方案3】：

您需要在 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 的分辨率。您需要使用更多检查元素进行测试。还有一件事，您还使用百分比作为填充或边距，以便根据 DOM 的宽度调整您的按钮。

【讨论】：

@PoovarasanRK 请确保不要为一台设备添加媒体。您必须检查您的问题要求。使用 chrome 进行开发。

【解决方案4】：

尝试使用媒体查询。我怀疑 padding-left:500px 是导致问题的原因。

查看此链接

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

@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 */
    }
}

【讨论】：