如何為Chrome和Mozila設置CSS以進行響應式設計？

Question

我是CSS，Bootstrap和HTML的新手。

我試圖在我的網頁上顯示搜索框，在Mozilla中它可以正常工作，但在Chrome中卻無法正常工作。

這是Mozilla瀏覽器的屏幕截圖：

在此處輸入圖片說明

這是Chrome的：

在此處輸入圖片說明

另請注意，當我增加或減少屏幕分辨率時，控件的分散程度很差。以下是造成此顯示的HTML代碼段：

<body>
<section id="customers">
 <div class="container" style="margin-top:0px;">
  <div class="row">
   <div class="col-lg-12
    <form class="form-inline" role="form" style="background:#eee">
     <div class="form-group">
      <input id="" class="leftText" type="text" value="" tabindex="1" name="query" autocomplete="off" placeholder="I am looking for" ></input>
      <strong >in</strong>
      <input id="" class="rigtTextBox" type="text" value="" tabindex="1" name="query" autocomplete="off" helptext="In the location" placeholder="In the location"></input>
      <select class="rightcitydropdown">
        <option>Mumbai</option>
        <option>Pune</option>
      </select>
     </div>
     <button class="btn btn-primary" id="srchBtn" >Ask Me</button>
    </div><!--end of col-lg-12-->
   </form>
  </div><!--end of row-->
 </div><!--end of container-->
</section>
</body>

在我的CSS中以下控件：

  .leftText{
        float :left;
        border-style:solid;
        border-width:5px;
        border-color:#989898 ;
        height:38px;
    }
    .rigtTextBox{
        border-style:solid;
        border-width:5px;
        border-right-width:1px;
        height:38px;        
        border-color:#989898 ;
    }
    .form-control{
        border-style:solid;
        border-width:5px;
        border-left-width:1px;
        border-color:#eee;
        font-size:10px;
        height:30px;
    }
    .form{
        border-width:5px;
        border-left-width:1px;
        border-color:#eee;
        font-size:10px;
    }
    .rightcitydropdown{
        float:right;
        border-style:solid;
        border-width:5px;
        border-left-width:1px;
        border-color:#989898 ;
        margin-right:17px;
        background:white;height:38px;
    }
    #searchOuterdiv{
        background:#F0F0F0;
    }

    #centralRow{
        margin-top:3px;
    }


strong { float:left; font-size:28px; margin:0px 10px 0 10px; height:30px; line-height:30px; color:#333333; }

#srchBtn { background:#4682B4; font-size:18px; line-height:16px;
 border:none; width:125px; text-align:center;margin-top:6px;
 height:35px; padding-bottom:5px; cursor:pointer; color:#333; padding-top:0px; margin-left:7px;color:white}

因此，請任何人告訴我如何設置CSS或正確的書面代碼以使外觀具有響應性。我希望此頁面可以顯示在多個分辨率的屏幕上，例如台式機，筆記本電腦，平板電腦等。

Answer 1

我建議您看一下http://sass-lang.com/

當設計在不同瀏覽器中看起來相同時，真的沒有“簡單”的答案，讓其他人為您處理

另外， http：//dowebsitesneedtolookexactlythesameineverybrowser.com/

Answer 2

您可以使用媒體查詢

例如

@media only screen and (min-width: 768px) and (max-width: 959px) {
  .box {
     color:#9d9d9d;
     font-size:12px;
     line-height:18px;
     margin: 0 auto;
     padding: 0;
     position: relative;
     width: 960px;
  }
}

在其中，您可以為firefox聲明此類：

.box, x:-moz-any-link, x:default { color:#000; }

因此，對於Chrome，IE，opera和safari，類別框的顏色為＃9d9d9d，而Firefox的顏色為＃000。

如何為Chrome和Mozila設置CSS以進行響應式設計？

問題描述

2 個解決方案

解決方案1
0 2013-10-09 10:45:53

解決方案2
0 2013-10-09 11:14:03

如何為Chrome和Mozila設置CSS以進行響應式設計？

問題描述

2 個解決方案

解決方案1 0 2013-10-09 10:45:53

解決方案2 0 2013-10-09 11:14:03

解決方案1
0 2013-10-09 10:45:53

解決方案2
0 2013-10-09 11:14:03