| |
|
|
| | Начал осваивать адаптивную вёрстку и пытаюсь сделать сайт, который будет подстраиваться под любое разрешение экрана и тянуть/сжимать все элементы соответственно, но почему-то все тексты, заголовки и картинки всегда одного и того же размера и не тянутся вообще.
Пытаюсь сделать тянущийся логотип в шапке таким образом:
<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 для блока:
.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%;
}
|
Т.е. делаю лого шириной 15%, лого само тянется, если увеличивать ширину, так же само изображение большого размера и должно тянуться, но при этом при изменении разрешения экрана или на сайтах позволяющих посмотреть сайт в разных разрешениях размер остаётся тот же. И размер шрифта не меняется, хотя он задан в em. Но при этом отступы в процентах срабатывают нормально и тянутся.
В meta прописано
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
В чём может быть проблема? | |
| |
|
|
| |
|
|
| |
для: Trivium
(09.10.2014 в 03:22)
| | | em как я понял ставит размер шрифта, установленный по умолчанию в браузере. А как его менять под разрешение экрана? | |
| |
|
|
|
| |
|
|
| |
для: Trivium
(09.10.2014 в 03:22)
| | | Попробуйте в стилях написать
@media (тут условие ширина окна < значение) {
а тут задать величину шрифта для этой величины окна
}
Если надо, то написать @media {} для нескольких размеров окна | |
| |
|
|
