如何使标题响应？

当浏览器屏幕最大化时，标题在笔记本电脑中完美运行。但是，当浏览器屏幕调整大小时，它不响应，发布按钮消失，搜索按钮更改其对齐方式，并在检查移动响应时，它完全错位。如何使标题响应？

.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{ 
 
\t 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; 
 
    } 
 

 
    /*-------------------------------------*/ \t 
 
    
 
    .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 { 
 
\t \t 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{ \t \t 
 
     background: #e54040; 
 
    } \t 
 
     
 
    .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"> 
 
\t <input type="text" placeholder="Search here..." required> 
 
\t <button type="submit">Search</button> 
 
\t </form> 
 
\t </div> 
 
\t <div class="post"> 
 
\t <button type="submit">POST</button> 
 
\t </div> 
 
    </div> 
 
</nav>

来源

2017-02-21 prathana dan

您可以添加所有设备代码到plunkr或任何其他开放代码，哪里可以编辑和播放？ – Smit

https://plnkr.co/edit/VFA33I7TjJy2aYysZpBL？p =预览 –

你是什么意思**标题**。什么头？有没有这样的东西** THE **东西 – vsync

您可以使用@media注释在CSS中，也可以使用引导程序框架。

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

来源

2017-02-21 11:23:53

这是错误的 - 它已经在代码中，这将如何修复'margin-left：1100px;'在按钮上？ –

你听说过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

read more here

你可以也尝试使用响应式框架，如

bootstrap

编辑部分代码以显示示例，但建议您学习媒体查询。

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

希望你得到它是如何工作

来源

2017-02-21 11:27:58

是的，我听说过他们！但没有使用，我的身体是敏感的。几乎没有变化的标题是否可能？ –

好吧让我看看你的代码片刻 –

这是我的完整代码：https://plnkr.co/edit/VFA33I7TjJy2aYysZpBL?p=preview –

与柔性尝试其易于使用，看我的代码它的工作

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

来源

2017-02-21 12:44:08

如何使标题响应？

回答

相关问题