Главная - Без рубрики - Отзывчивый веб-дизайн: гибкие свойства

Отзывчивый веб-дизайн: гибкие свойства

Небольшое продолжение статьи Отзывчивый веб-дизайн. Статья очень большая и времени ее переводить сразу — нет. Поэтому читаю и пишу когда есть момент.

Сегодня — немного советов о том, как добиться эффективного показа ваших страниц сайта на мониторах с различным разрешением экрана.

Совет 1
Если у вас в свойствах настроек стилей вывода картинок используется фиксированная ширина, указанная в пикселах, — замените это свойство таким:

img { max-width: 100%; }

Обратите внимание, что это свойство не работает корректно в IE (Internet Explorer).

Совет 2

Можно попробовать использовать дополнительно созданный файл стилей, назвав его к примеру — mobile.css.

Если в основном файле стилей (style.css) у вас для всех основных элементов блочной верстки (#wrapper, #content, #sidebar, #nav) заданы, например, такие свойства:

/* Default styles that will carry to the child style sheet */

html,body{
background…
font…
color…
}

h1,h2,h3{}
p, blockquote, pre, code, ol, ul{}

/* Structural elements */
#wrapper{
width: 80%;
margin: 0 auto;

background: #fff;
padding: 20px;
}

#content{
width: 54%;
float: left;
margin-right: 3%;
}

#sidebar-left{
width: 20%;
float: left;
margin-right: 3%;
}

#sidebar-right{
width: 20%;
float: left;
}

Для файла mobile.css задайте такие свойства:

#wrapper{
width: 90%;
}

#content{
width: 100%;
}

#sidebar-left{
width: 100%;
clear: both;

/* Additional styling for our new layout */
border-top: 1px solid #ccc;
margin-top: 20px;
}

#sidebar-right{
width: 100%;
clear: both;

/* Additional styling for our new layout */
border-top: 1px solid #ccc;
margin-top: 20px;
}

В результате, ваша страница в мобильных устройствах примет вот такой вид:

Совет 3

Можно  дописать в файл стилей специальные команды для нескольких вариантов мобильных устройств, с различным типом и разрешением экрана, например:

/* Smartphones (portrait and landscape) ———— */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ———— */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ———— */
@media only screen
and (max-width : 320px) {
/* Styles */
}

Совет 4

Если вы владеете хотя бы средними навыками верстки файла стилей, вы можете создать несколько вариантов своего основного файла стилей — для разных мониторов с разным разрешением экрана, например, для разрешения выше width:600px и ниже 600px. После этого в файле header.php добавьте путь для каждого файла стилей отдельно:

<link rel=»stylesheet» type=»text/css»
media=»screen and (max-device-width: 480px)»
href=»shetland.css» />

Совет 5
Можно изменить блочный макет вашей страницы, когда выводиться несколько столбцов с данными, на один столбец, для мониторов с меньшим разрешением экрана. Скрыв часть контента, вы замените его ссылками. Например, так, как это показано на скриншоте ниже:

Для скрытия части контента в CSS давно существует замечательное свойство: display:none.

Пример кода для наших файлов:

<p><a href=»#»>Left Sidebar Content</a> | <a href=»#»>Right Sidebar Content</a></p>

<div id=»content»>
<h2>Main Content</h2>
</div>

<div id=»sidebar-left»>
<h2>A Left Sidebar</h2>

</div>

<div id=»sidebar-right»>
<h2>A Right Sidebar</h2>
</div>

Файл стилей CSS по умолчанию:

#content{
width: 54%;
float: left;
margin-right: 3%;
}

#sidebar-left{
width: 20%;
float: left;
margin-right: 3%;
}

#sidebar-right{
width: 20%;
float: left;
}
.sidebar-nav{display: none;}

Файл mobile.css — подключение свойств для мобильных устройств:

#content{
width: 100%;
}

#sidebar-left{
display: none;
}

#sidebar-right{
display: none;
}
.sidebar-nav{display: inline;}

Продолжение будет…

china-market888.ru — элитная мебель барокко

О admin

Оставить комментарий

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*