堆棧內存溢出
  簡體   English   中英

如何使標題響應？

[英]How to make the header responsive?

 原文  2017-02-21 11:19:32  3   3    html/ css

問題描述

當瀏覽器屏幕最大化時，標題在我的筆記本電腦中完美運行。 但是當瀏覽器屏幕調整大小時，它沒有響應，post按鈕消失，搜索按鈕改變其對齊方式，當檢查移動響應時，它完全錯位。 

 .navbar-fixed-top{ -webkit-box-shadow: 0 6px 6px -6px red; -moz-box-shadow: 0 6px 6px -6px red; box-shadow: 0 6px 6px -6px red; background: rgba(192, 192, 192, 0.1) } #logo{ margin-top: -5px; } /*Search field*/ #search{ font: 13px 'Lucida sans', Arial, Helvetica; color: #eee; text-align: center; } #search a { color: #ccc; } /*-------------------------------------*/ .cf:before, .cf:after{ content:""; display:table; } .cf:after{ clear:both; } .cf{ zoom:1; } /*-------------------------------------*/ .form-wrapper{ height :60px; } .form-wrapper input { width: 500px; height: 40px; padding: 10px 5px; float: left; font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma'; border: 0; margin-top: 10px; margin-left: 150px; background: #eee; -moz-border-radius: 3px 0 0 3px; -webkit-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; } .form-wrapper input:focus { outline: 0; background: #fff; -moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset; -webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset; box-shadow: 0 0 2px rgba(0,0,0,.8) inset; } .form-wrapper input::-webkit-input-placeholder { color: #999; font-weight: normal; } .form-wrapper input:-moz-placeholder { color: #999; font-weight: normal; } .form-wrapper input:-ms-input-placeholder { color: #999; font-weight: normal; } .form-wrapper button { overflow: visible; position: relative; border: 0; padding: 0; cursor: pointer; height: 40px; width: 110px; font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma'; color: #fff; text-transform: uppercase; background: #d83c3c; -moz-border-radius: 0 3px 3px 0; -webkit-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3); top:-40px !important; margin-left: 373px; } .form-wrapper button:hover{ background: #e54040; } .form-wrapper button:active, .form-wrapper button:focus{ background: #c42f2f; } .form-wrapper button:hover:before{ border-right-color: #e54040; } .form-wrapper button:focus:before{ border-right-color: #c42f2f; } .form-wrapper button::-moz-focus-inner { border: 0; padding: 0; } /*End of search style*/ /* post button*/ .post{ height:5px; } .post button { overflow: visible; position: relative; border: 0; padding: 0; cursor: pointer; height: 40px; width: 110px; font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma'; color: #fff; text-transform: uppercase; background: #d83c3c; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3); top:-49px !important; margin-left: 1100px; } .post{ width: 100% } .post button:hover{ background: #e54040; } .post button:active, .post button:focus{ background: #c42f2f; } .post button:hover:before{ border-right-color: #e54040; } .post button:focus:before{ border-right-color: #c42f2f; } .post button::-moz-focus-inner { border: 0; padding: 0; } 
 <nav class="navbar navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"><img src="images/logo.svg" id="logo"></a> </div> <div id="search"> <form class="form-wrapper cf"> <input type="text" placeholder="Search here..." required> <button type="submit">Search</button> </form> </div> <div class="post"> <button type="submit">POST</button> </div> </div> </nav>

在此輸入圖像描述

3 個解決方案

解決方案1
 0  2017-02-21 11:23:53

您可以在css中使用@media注釋，也可以使用bootstrap框架。 

@media only screen and (max-width: 768px) {
    /*For mobile or iPad*/
    .post {
        width: 100%;
    }
}

解決方案2
 0  2017-02-21 11:27:58

你聽說過css media queries嗎？ 如果不是我建議您閱讀它們（一個簡單的谷歌搜索會做）。 媒體查詢由可選媒體類型和零個或多個表達式組成，這些表達式通過使用媒體功能限制樣式表的范圍。 您可以使用media queries告訴您css在特定屏幕尺寸下顯示或重新排列某些內容。

例如 

.size {
    width: 50%;
}

@media only screen and (min-width: 160px) and (max-width: 500px) {
    .size {
        width: 100%;
    }
}

這個query將改變.size width至100%如果屏幕尺寸小於500px ，返回到50%如果屏幕尺寸大於500px

在這里閱讀更多

您也可以嘗試使用響應式框架

引導

編輯了部分代碼以顯示示例，但建議您學習媒體查詢。

你的CSS 

    .navbar-fixed-top{
    -webkit-box-shadow: 0 6px 6px -6px red;
    -moz-box-shadow: 0 6px 6px -6px red;
    box-shadow: 0 6px 6px -6px red;
    background: rgba(192, 192, 192, 0.1)
}

#logo{
    margin-top: -5px;
}

/*Search field*/
#search{

    font: 13px 'Lucida sans', Arial, Helvetica;
    color: #eee;
    text-align: center;
}

#search a {
    color: #ccc;
}

/*-------------------------------------*/

.cf:before, .cf:after{
  content:"";
  display:table;
}

.cf:after{
  clear:both;
}

.cf{
  zoom:1;
}

/*-------------------------------------*/   
/*EDITTED*/
.form-wrapper{
    height :50px;
    width: 100%;
}

/*EDITTED*/
.form-wrapper input {
    width: 500px;
    height: 40px;
    float: left;
    padding: 0 0 0 5px;    
    font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
    border: 0;
    margin-left: 150px;
    background: #eee;
    -moz-border-radius: 3px 0 0 3px;
    -webkit-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;      
}

.form-wrapper input:focus {
    outline: 0;
    background: #fff;
    -moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
    -webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}

.form-wrapper input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
}

.form-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
}

.form-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
}    

.form-wrapper button {
    overflow: visible;
    position: relative;

    border: 0;
    padding: 0;
    cursor: pointer;
    height: 40px;
    width: 110px;
    font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
    color: #fff;
    text-transform: uppercase;
    background: #d83c3c;
    -moz-border-radius: 0 3px 3px 0;
    -webkit-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;      
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
    float: left;
}   

.form-wrapper button:hover{     
    background: #e54040;
}   

.form-wrapper button:active,
.form-wrapper button:focus{   
    background: #c42f2f;    
}



.form-wrapper button:hover:before{
    border-right-color: #e54040;
}

.form-wrapper button:focus:before{
    border-right-color: #c42f2f;
}    

.form-wrapper button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/*End of search style*/

/* post button*/
.post{
    height:5px;
}
.post button {
    overflow: visible;
    position: relative;

    border: 0;
    padding: 0;
    cursor: pointer;
    height: 40px;
    width: 110px;
    font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
    color: #fff;
    text-transform: uppercase;
    background: #d83c3c;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;      
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
    top:-49px !important;
    margin-left: 80%;
}


.post{
    width: 100%
}   

.post button:hover{     
    background: #e54040;
}   

.post button:active,
.post button:focus{   
    background: #c42f2f;    
}



.post button:hover:before{
    border-right-color: #e54040;
}

.post button:focus:before{
    border-right-color: #c42f2f;
}    

.post button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

媒體查詢 

@media only screen and (min-width: 160px) and (max-width: 1200px) {
    .post {
        clear: both;
        margin: 50px auto 0 auto;
        text-align: center;
        margin-left: -45%;
    }
    .container-fluid {
        height: 120px;
    }
}
@media only screen and (min-width: 160px) and (max-width: 900px) {
    .form-wrapper input {
        width: 300px;
        margin-left: 20%;
    }
    }
@media only screen and (min-width: 160px) and (max-width: 535px) {
    .form-wrapper input {
        width: 150px;
    }
    .form-wrapper button {
        width: 100px;
    }
}

HTML 

<!--same as question-->

在查詢之前

在小屏幕上查詢后

希望你了解這是如何工作的

解決方案3
 0  2017-02-21 12:44:08

嘗試使用flex易於使用，請參閱我的代碼，它適用於所有設備 

 * { padding: 0; margin: 0; box-sizing: border-box; outline: none; resize: none; } .navbar-fixed-top{ -webkit-box-shadow: 0 6px 6px -6px red; -moz-box-shadow: 0 6px 6px -6px red; box-shadow: 0 6px 6px -6px red; background: rgba(192, 192, 192, 0.1) } .navbar-brand { display:inline-block; } /*Search field*/ #search{ font: 13px 'Lucida sans', Arial, Helvetica; color: #eee; text-align: center; } .form-wrapper{ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 2; -webkit-flex: 2; -ms-flex: 2; flex: 2; padding-left:10px; padding-right:10px; width:100%; } .form-wrapper input { -webkit-box-flex: 2; -webkit-flex: 2; -ms-flex: 2; flex: 2; height: 40px; padding: 10px 5px; font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma'; border: 0; background: #eee; -moz-border-radius: 3px 0 0 3px; -webkit-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; } .form-wrapper input:focus { outline: 0; background: #fff; -moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset; -webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset; box-shadow: 0 0 2px rgba(0,0,0,.8) inset; } .form-wrapper input:-moz-placeholder, .form-wrapper input:-ms-input-placeholder, .form-wrapper input::-webkit-input-placeholder { color: #999; font-weight: normal; } .btn-style { overflow: visible; position: relative; border: 0; padding: 0 16px; cursor: pointer; height: 40px; font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma'; color: #fff; text-transform: uppercase; background: #d83c3c; -moz-border-radius: 0 3px 3px 0; -webkit-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3); } .btn-style:hover{ background: #e54040; } .btn-style:active, .btn-style:focus{ background: #c42f2f; } .btn-style:hover:before{ border-right-color: #e54040; } .btn-style:focus:before{ border-right-color: #c42f2f; } .btn-style::-moz-focus-inner { border: 0; padding: 0; } .container-fluid { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding:16px; } form { margin: 0; display:block; } @media only screen and (max-width: 767px) { .container-fluid { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 144px; } } 
 <nav class="navbar navbar-fixed-top"> <div class="container-fluid"> <a class="navbar-brand" href="#"><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" id="logo" width="100"></a> <form class="form-wrapper"> <input type="text" placeholder="Search here..." required> <button class="btn-style" type="submit">Search</button> </form> <div class="post"> <button class="btn-style" type="submit">POST</button> </div> </div> </nav>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何使標題色帶響應 如何制作響應式表頭？ 如何使標題和徽標響應？（Bootstrap） 我們如何使標題的響應高度 如何使我的CSS頭響應 如何更改標題的寬度並使其響應 制作 header 和帶有文本響應的圖片？ 如何使響應表和標頭都固定在同一HTML表上 如何使我的網站上的標題圖片具有響應性？ 導航欄是否位於桌面標頭中，如何使其響應？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM