Динамичен дизайн според резолюцията




Съвременните устройства работят с резолюции от 320px (iPhone) до 2560px (големи монитори). Това налага гъвкави дизайнерски решения за да изглежда дадена уеб страница добре при всяка резолюция. Фиксираната ширина на елементите вече не върши работа. Страницата трябва да бъде направена така, че динамично да се променя, в зависимост от резолюцията на която се разглежда. Това може да се постигне чрез използване на HTML5 & CSS3 media queries. Вижте демо на такава страница: http://webdesignerwa...sign/final.html

1. HTML5.js

В демото горе е използван HTML5. Internet Explorer с версия преди 9 не поддържа новите елементи, използвани в HTML5 като <header>, <article>, <footer>, <figure>, и.т.н. Ако се включи html5.js Javscript файл в HTML документа ще позволи на IE да разпознава новите елементи.

Използваме следния код за целта:


<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
[/CODE] [b]2. CSS[/b] Добра идея да превърнете HTML5 елементите в блок. Примерен код е:
[CODE]
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
Една примерна CSS структура ще изглежда така:

#pagewrap {
width: 980px;
margin: 0 auto;
}
#header {
height: 160px;
}
#content {
width: 600px;
float: left;
}
#sidebar {
width: 280px;
float: right;
}
#footer {
clear: both;
}
[/code] Тази схема може да се превърне в динамична, чрез използване на CSS 3 и процентни отношения. [b]3. CSS3 Media Query[/b] Internet Explorer 8 и по-старите версии не поддържат CSS 3. Затова се налага да бъде добавен javascript код за да може да работи при тях. Това става възможно с добавяне само на един ред код:
[code]
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
Може да добавим CSS 3 кода в отделен css файл и да го добавим в сайта така:

<link href="media-queries.css" rel="stylesheet" type="text/css">
[/code] Кодът който ни трябва изглежда по този начин:
[code]

@media screen and (max-width: 600px) {
.class {
background: #ccc;
}

#pagewrap {
width: 95%;
}

#content {
width: 60%;
padding: 3% 4%;
}
}
Трябва да се внимава за допълнителните скоби, които ограждат стандартния ви CSS код. Кодът по-горе се отнася за максимална ширина до която да действа зададения код. Може да го включим и в отделен файл така:

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
[/code] Следващият код ще се отнася само за резолюции по-големи от 900px:
[code]
@media screen and (min-width: 900px) {
.class {
background: #666;
}
}
Може да се комбинират две условия:

@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}
[/code] Може да се използва още един термин в кода, а именно "Device width" . Той се отнася до реалната резолюция на устройството, а не само на разглежданата в момента област.
[code]
@media screen and (max-device-width: 480px) {
.class {
background: #000;
}
}
Следващият код се отнася изключително за iPhone 4:

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
[/code] За iPad може да включим опция за разпознаване на ориентацията:
[code]
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
4. Използване на гъвкави изображения (Flexible Images). Това означава, че изображенията, автоматично ще променят големината си, според резолюцията.

img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
[/code] Достатъчно е да се добави max-width 100% и height - auto. За да работи ширината под IE8 се използва малък хак в кода, както е посочено по-горе. [b]5. Използване на гъвкаво видео[/b]. Това се отнася само за вградените (embedded) видео клипове. Кодът е този:
[CODE]
.video embed,
.video object,
.video iframe {
width: 100%;
height: auto;
}


2


0 Comments

Няма коментари.

Създайте нов акаунт или се впишете, за да коментирате

За да коментирате, трябва да имате регистрация

Създайте акаунт

Присъединете се към нашата общност. Регистрацията става бързо!


Регистрация на нов акаунт

Вход

Имате акаунт? Впишете се оттук.


Вписване