1
У меня есть следующий html для моего заголовка.Невозможно отредактировать текст с помощью медиа-запроса
<header id="header">
<img src="images/logo.png"/>
<div class="container">
<nav id="nav">
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="about">About Me</a>
</li>
<li>
<a href="pricing">Pricing</a>
</li>
<li>
<a href="sessions">Sessions</a>
</li>
<li>
<a href="signup">Sign Up</a>
</li>
<li>
<a href="contact">Contact</a>
</li>
</ul>
</nav>
</div>
</header>
У меня есть следующий мой CSS:
img .header-basic{
height:30px;
}
#content {
margin: 5px;
margin-top:00px;
}
#logo {
height: 100px;
top: 0px;
position: absolute;
left: 75px;
}
#content img{
float:right;
}
/*Header*/
#header img {
width: 450px;
height: auto;
display:block;
margin: 0 auto;
}
@media only screen and (max-width:800px) {
#header img {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
#nav ul {
text-align: center;
}
#nav ul li {
display: inline;
text-decoration: none;
margin-left: 15px;
margin-right: 15px;
text-align: center;
font-family: 'Verdana';
}
#nav ul li a {
text-decoration: none;
color: black;
font-size: 20px;
font-family: 'Verdana';
}
}
#nav ul {
text-align: center;
}
#nav ul li {
display: inline;
text-decoration: none;
margin-left: 20px;
margin-right: 20px;
text-align: center;
font-family: 'Verdana';
}
#nav ul li a {
text-decoration: none;
color: black;
font-size: 20px;
font-family: 'Verdana';
}
/*End Header*/
Мой медиа-запрос активирует для создания изображения меньшего размера, но текст остается тем же самым. Я хочу, чтобы маржа была уменьшена, чтобы сохранить всю навигацию на одной линии. Я кодирую в Visual Studio и тестирую в Chrome 55.0.2883.87 м (64-разрядный).
Это держать их на той же линии, но я хочу, чтобы они стали меньше, когда это меньшее устройство. – Patrick
вы можете добавить носитель для более мелких устройств таким же образом. Я добавлю его в фрагмент кода. –
Я добавил медиа для меньшего экрана <468, который сделает размер шрифта: 10 пикселей и margin-right: 1px, margin-left:! Px; вы можете отредактировать это по мере необходимости. –