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

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

Совет 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 - элитная мебель барокко