如何爲chrome和mozila設置響應式設計的css？

我是新來的CSS，引導程序& HTML。如何爲chrome和mozila設置響應式設計的css？

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

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

enter image description here

，這是Chrome瀏覽器：

enter image description here

還要注意的是，當我增加或減少屏幕分辨率控件的分散性很差。以下是負責此操作的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或正確編寫的代碼，以使響應appearance.I希望此頁在多個分辨率屏幕上顯示，比如臺式機，筆記本電腦，平板電腦等。在此先感謝。

來源

2013-10-09 sachin_ware

爲什麼你在這裏寫你的CSS。使用引導'row-fluid'，'span-x'類並使其響應 –

我認爲你的意思是跨瀏覽器，而不是響應。我在你的代碼中做了一些編輯，你可以在這裏看到它：[jsFiddle]（http://jsfiddle.net/s89cT/） –

是@Mohsen，它顯示了不同的瀏覽器和不同的結果，如果我改變同一瀏覽器的分辨率說125％的125％它做同樣的事情。 –

我會建議在尋找的東西像http://sass-lang.com/

真的沒有「簡單」的答案，當談到尋找在不同瀏覽器相同的外觀設計，讓別人去處理它爲你

而且，http://dowebsitesneedtolookexactlythesameineverybrowser.com/

來源

2013-10-09 10:45:53 zajd

實際上有一個簡單的答案，OP使用Bootstrap，他只需要學習如何正確使用它。 – Mark

您可以使用媒體查詢

例如：

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

來源

2013-10-09 11:14:03 Reverter

如何爲chrome和mozila設置響應式設計的css？

回答

相關問題