Question

有没有人有想法让这些代码响应？它在chrome（1920x1080）上看起来相当不错，但在移动显示器上却很糟糕：

＆＃13;

<form action="searchResult.php" method="post" id="result">
  <input type="submit" style="float: right;/* width: 60px; */height: 65px;border-radius: 100px;/* border-left-style: double; */font-size: 25px;/* margin-top: 10px; *//* position: relative; */border: 2px solid #2B2E34;border-left-style: hidden;border-bottom-left-radius: 20px;border-top-left-radius: 20px;"
  value="Suchen">
  <div style="overflow: hidden; padding-right: .5em;">
    <input type="text" class="input" name="searchrestaurant" id="searchfieldRestaurant" autocomplete="off" value="" placeholder="PLZ, Ort">
  </div>

</form>

＆＃13;

Answer 1

要处理所有设备，最好使用像Bootstrap或Foundation这样的框架。

如果您需要特定设备或比率的特定设计，则必须使用@media

Answer 2

您可以为不同的屏幕尺寸创建指定的CSS，如此

/* Small devices (tablets and phones, 768px and below) */
@media screen and (max-width: 768px) {
  .display-block-on-mobile {
     display: block;
   }
}

使用min-width和max-width指定要影响的尺寸

Answer 3

最好的方法是使用Foundation或Bootsrap。

但是这段代码会告诉你他们使用的概念。您必须考虑%和em而不是px。

（要了解你必须在400px下调整窗口大小）

＆＃13;

html {
  font-size: 14px; /* Set default font-size */
}
body {
  margin: 0; /* Reset margin to 0 */
}
.row { 
  position: absolute; /* Set relative width to this */
  width: 100%;
}
.col {
  float: left; /* All `.col` are float left */
}
.col:nth-child(1) {
  width: 75%; /* The first col is 75% */
}
.col:nth-child(2) {
  width: 25%; /* The second col is 25% */
}
/* Media query, code effect only when window is under 600px */
@media (max-width: 600px) {
  /* Mobile need bigger font size */
  body {
    font-size: 1.2em;      
  }
  /* Both .col are 100% */
  .col:nth-child(1), .col:nth-child(2) {
    width: 100%; 
  }
}
/* Input take 100% of the parent .col */
input {
  display: block;
  width: 100%;  
}
input[type="text"] {
  line-height: 1.5em;      
}
input[type="button"] {
  font-size: 1.2em;      
}

＆＃13;

<div class="row">
  <div class="col">
    <input type="text" placeholder="Enter text here"/>
  </div>
  <div class="col">
    <input type="button" value="Button"/>
  <div>
</div>

＆＃13;

输入表单旁边的搜索按钮的响应解决方案

3 个答案: