| Kosten | Воскресенье, 29 Июля 2018, 21:54 | Сообщение 1 |
| В наши дни люди, просматривающие интернет на множестве устройств, важно, чтобы ваш сайт выглядел хорошо на всех из них. Макет страницы, который люди стали ожидать на смарт телевизоре, не такой как на смартфоне. В первом случае макет имеет тенденцию течь по горизонтали, тогда как мобильные устройства могут просматривать страницу в буквенной или альбомной ориентации. Так же, как браузер нюхает было в значительной степени потрачены впустую усилия.
Ваш лучший выбор заключается в разработке макетов в жидкой манере, так что они могут приспособиться к размеру экрана. Этот стиль макета известен как адаптивный дизайн. В сегодняшней статье речь пойдет о заголовке веб страницы. В частности, как получить навигационные ссылки, чтобы перейти от горизонтального стиля к вертикальному идет.
Что должно идти в заголовке?
Какие компоненты страницы включены в Заголовок страницы, будут отличаться от сайта к сайту, но общие элементы включают:
1. Логотип;
2. Фотография;
3. Название сайта, лица или компании;
4. Навигация;
5. Контактная информация, например номер телефона или адрес электронной почты
слоган или Цитата;
Многие сайты размещают ссылки под главным заголовком, но мы включим их вместе с заголовком страницы для этого упражнения. Затем мы посмотрим, что происходит с полноразмерной страницей, когда область просмотра становится слишком маленькой, чтобы содержимое заголовка отображалось в одной строке.
Имея это ввиду, вот полная страница будет выглядеть так:
Чтобы сделать страницу отзывчивой, мы автоматически настроим элементы заголовка в узком видовом экране:
Тестовая Страница в Small Viewport
Тестовая Страница в Small Viewport с расширенным меню
Как видите, внешний вид мобильного сайта несколько отличается от полно размерного:
1. Звенья укладываются вертикально.
2. Ссылки доступны через Trigram.
Построение базовой страницы
Если Вы не хотите специально ориентироваться на мобильные устройства, вы можете начать с создания стандартного полноразмерного сайта.
Содержимое заголовка легко идентифицируется элементом header. Он представляет собой контейнер для вводного содержимого и / или набора навигационных ссылок. Сами ссылки заключены в неупорядоченный список, как это обычно в наши дни.
Код <alasuplatform id="alasuplatform"> <div class="asghest-grozsing"> <h1> ZorNet.Ru: Портал Вебмастера </h1> <koconsumers id="koconsumers"> <ul> <li> <a href="#">Главная</a> </li> <li> <a href="#">Скрипты</a> </li> <li> <a href="#">Шаблоны</a> </li> <li> <a href="#">Дизайн</a> </li> <li> <a href="#">Контент</a> </li> </ul> </koconsumers> </div> </alasuplatform> <div class="ksatdetean"> <div class="asghest-grozsing"> <p> Описание под номером один №1 </p> <p> Описание под номером два №2 </p> <p> Описание под номером три №3 </p> </div> </div>
Браузеры должны представить выше разметки как простой OLE vanilla страницы:
Все атрибуты, связанные с внешним видом, должны быть установлены с помощью CSS, в идеале в отдельном файле:
Код body {
background: #8eb0f3;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
.asghest-grozsing {
position: relative;
margin: 0 auto;
width: 87%;
max-width: 1096px;
font-family: helvetica, sans-serif;
}
.ksatdetean {
position: relative;
padding-top: 78px;
}
.ksatdetean p {
margin-bottom: 8px;
}
#alasuplatform {
z-index: 3;
position: fixed;
width: 100%;
height: 59px;
line-height: 58px;
background: #1d1b1b;
color: #f7f3f3;
}
#alasuplatform h1 {
top: 0px;
margin: 0px;
text-transform: uppercase;
font-size: 1.1em;
}
#koconsumers {
position: absolute;
right: 0;
top: -15px;
height: 60px;
}
#koconsumers ul li {
float: left;
list-style: none;
}
#koconsumers ul li a {
display: block;
color: #fdfafa;
text-decoration: none;
padding: 0 7px;
}
Не стесняйтесь играть с вышеуказанными правилами, чтобы узнать, какое влияние изменения оказывают на макет документа.
Вы должны сразу заметить, что он выглядит довольно хорошо на настольном мониторе, но не так много в мобильном браузере.
Добавление отклика
Ключ к тому, чтобы сделать ваши страницы отзывчивыми, - включить медиа запросы в ваш CSS. Введенный в CSS3 медиа запросы используют правило @media для включения блока свойств CSS на основе условия. Они могут оценить несколько полезных атрибутов, относящихся к скорости отклика, включая минимальную и максимальную ширину окна просмотра.
Для нашей простой демонстрации мы изменим макет, чтобы он соответствовал ширине видового экрана 599 пикселей или меньше. Обратите внимание, что правила, применяемые независимо от размера видового экрана, которые дублируются блоком @media, эффективно переопределяются последним:
Код @media (max-width: 599px) {
#alasuplatform .asghest-grozsing {
width: 100%;
}
#alasuplatform h1 {
padding-left: 3%;
}
#koconsumers {
width: 100%;
top: 60px;
}
#koconsumers:before {
content: '\2630';
display: block;
position: absolute;
right: 3%;
top: -50px;
line-height: 40px;
font-size: 1.4em;
cursor: pointer;
}
#koconsumers ul {
background: #222;
width: 100%;
margin: 0px;
}
#koconsumers ul li {
float: none;
}
#koconsumers ul li a {
padding: 10px 3%;
line-height: 20px;
border-top: 1px solid #333;
}
}
Чтобы проверить скорость отклика, постепенно перетащите правый край окна браузера, чтобы область просмотра постепенно уменьшалась. В какой-то момент, как раз перед тем, как навигационные ссылки начнут перекрывать Заголовок сайта, макет должен измениться на мобильный.
Вывод:
В старые добрые времена, все о чем вы должны были беспокоиться, было сделать страницу хорошо выглядеть во всех основных браузерах. Сегодня существуют устройства всех размеров, с которыми можно бороться.
С популярностью носимых устройств взрывается, там обязательно будет еще больше проблем на горизонте. Единственное утешение в том, что безопасность работы, кажется, гарантирована.
Демонстрация
| | Страна: (RU) |
| |
