<div id="menu">
<a href="link" class="lefttopmenu">Ссылка</a>
<a href="link" class="lefttopmenu">Ссылка</a>
<a href="link" class="lefttopmenu">Ссылка</a>
<a href="link" id="logolink"><img src="/images/logo.png" id="logoimg" /></a>
<input type="text" id="searchinpt" placeholder="Поиск" class="righttopmenu" />
<a href="link" class="righttopmenu">Контакты</a>
<a href="/news" class="righttopmenu">Новости</a>
</div>
Проблемы с адаптивной вёрсткой
Начал осваивать адаптивную вёрстку и пытаюсь сделать сайт, который будет подстраиваться под любое разрешение экрана и тянуть/сжимать все элементы соответственно, но почему-то все тексты, заголовки и картинки всегда одного и того же размера и не тянутся вообще.
Пытаюсь сделать тянущийся логотип в шапке таким образом:
CSS для блока:
Т.е. делаю лого шириной 15%, лого само тянется, если увеличивать ширину, так же само изображение большого размера и должно тянуться, но при этом при изменении разрешения экрана или на сайтах позволяющих посмотреть сайт в разных разрешениях размер остаётся тот же. И размер шрифта не меняется, хотя он задан в em. Но при этом отступы в процентах срабатывают нормально и тянутся.
В meta прописано
В чём может быть проблема?
Пытаюсь сделать тянущийся логотип в шапке таким образом:
Код:
Код:
.lefttopmenu
{
font-size:1.2em;
float:left;
margin-left:5%;
font-weight:bold;
}
.righttopmenu
{
font-size:1.2em;
float:right;
margin-right:5%;
}
#menu
{
width:100%;
height:6%;
padding-top:1%;
}
#menu a
{
display:block;
text-decoration:none;
color:#1a1a18;
}
#logoimg
{
width:15%;
}
{
font-size:1.2em;
float:left;
margin-left:5%;
font-weight:bold;
}
.righttopmenu
{
font-size:1.2em;
float:right;
margin-right:5%;
}
#menu
{
width:100%;
height:6%;
padding-top:1%;
}
#menu a
{
display:block;
text-decoration:none;
color:#1a1a18;
}
#logoimg
{
width:15%;
}
В meta прописано
Код:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
А кто сказал что em тянется? Для шрифта рекомендую использовать css conditional formatting:
Код:
@media (min-width: 768px) {
.text {font-size:10px;}
}
@media (min-width: 992px) {
.text {font-size:11px;}
}
@media (min-width: 1200px) {
.text {font-size:12px;}
}
@media (min-width: 1300px) {
.text {font-size:14px;}
}
.text {font-size:10px;}
}
@media (min-width: 992px) {
.text {font-size:11px;}
}
@media (min-width: 1200px) {
.text {font-size:12px;}
}
@media (min-width: 1300px) {
.text {font-size:14px;}
}
А что разве em не тянет? Везде пишут он относительный даёт размер шрифта. И как с изображениями быть, чтобы они тянулись и выглядели на всех разрешениях одинаково?
em как я понял ставит размер шрифта, установленный по умолчанию в браузере. А как его менять под разрешение экрана?
Цитата: trivium
em как я понял ставит размер шрифта, установленный по умолчанию в браузере. А как его менять под разрешение экрана?
Через css conditional formatting. Пример был выше.