Съвременните устройства работят с резолюции от 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 да разпознава новите елементи.
Използваме следния код за целта:
Една примерна CSS структура ще изглежда така:
<!--[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 3 кода в отделен 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 код. Кодът по-горе се отнася за максимална ширина до която да действа зададения код. Може да го включим и в отделен файл така:
<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%;
}
}
Може да се комбинират две условия:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
[/code] Следващият код ще се отнася само за резолюции по-големи от 900px:[code]
@media screen and (min-width: 900px) {
.class {
background: #666;
}
}
Следващият код се отнася изключително за iPhone 4:
@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;
}
}
4. Използване на гъвкави изображения (Flexible Images). Това означава, че изображенията, автоматично ще променят големината си, според резолюцията.
<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">
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;
}