Question

如何使此响应。我正在处理单页响应式网站，我已将此代码替换为提交按钮。在桌面视图中，它工作正常。当我在移动设备上查看它时，我看不到提交按钮。

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

Answer 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媒体查询。

Answer 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;
  }
}

Answer 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的宽度你的按钮将被调整。

Answer 4

尝试使用媒体查询..我怀疑填充左：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 */
    }
}

如何使此代码具有响应性

4 个答案: