如何使标题响应？
当浏览器屏幕最大化时，标题在我的笔记本电脑中完美运行。但是当浏览器屏幕调整大小时，它没有响应，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 个答案:
答案 0 :(得分：0)
您可以在css中使用@media注释，也可以使用bootstrap框架。
@media only screen and (max-width: 768px) {
/*For mobile or iPad*/
.post {
width: 100%;
}
}
答案 1 :(得分：0)
您是否听说过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会恢复为 .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;
}
1}}
你也可以尝试使用像
这样的响应式框架编辑部分代码以显示示例，但建议您学习媒体查询。
您的CSS
@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;
}
}
媒体查询
<!--same as question-->
<强> HTML
public class CustomLocalizer : IStringLocalizer
{
private readonly CultureInfo _currentCulture;
public IEnumerable<LocalizedString> GetAllStrings(bool includeParentCultures)
{
ResourceManager rm = new ResourceManager(typeof(MyResources));
foreach(DictionaryEntry value in rm.GetResourceSet(_currentCulture, false, true))
{
yield return new LocalizedString((string)value.Key, (string)value.Value);
}
}
public CustomLocalizer(CultureInfo culture = null)
{
_currentCulture = culture ?? CultureInfo.DefaultThreadCurrentUICulture;
}
public IStringLocalizer WithCulture(CultureInfo culture)
{
return new CustomLocalizer(culture);
}
LocalizedString IStringLocalizer.this[string name]
{
get
{
ResourceManager rm = new ResourceManager(typeof(MyResources));
return new LocalizedString(name, rm.GetString(name, _currentCulture));
}
}
LocalizedString IStringLocalizer.this[string name, params object[] arguments]
{
get
{
ResourceManager rm = new ResourceManager(typeof(MyResources));
return new LocalizedString(name, rm.GetString(name, _currentCulture));
}
}
}
希望你了解这是如何运作的
答案 2 :(得分：0)
尝试使用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>
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？