Место для вас

Использование Media Queries в css3

Сегодня, согласно статистике, все больше и больше людей используют плашеты или смартфоны для серфинга в нете. Так что разработка шаблонов сайта только под настольные компьютеры или ноутбуки уже прошлый век и не есть хорошо. Чтоб конкурировать среди огромного количества сайтов нужно максимально сделать его удобным. Современные запросы требуют, а возможности позволяют сделать так, чтоб ваш сайт отоброажался ВЕЗДЕ одинаково УДОБНО. И эта палочка выручалочка - МедиаЗапросы.

Подключаем Media Queries в IE

Internet Explorer 8 и более ранние версии не поддерживает css3 media queries. Но вы можете включить этот функционал, добавив Javascript файл css3-mediaqueries.js


<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

 Подключение CSS файлов в head


<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

Подключение медиазапросов в css файлах


Смартфон (портретная и альбомная ориентация)
@media
only screen and (min-device-width : 320px)
and (max-device-width : 480px)
{
/* CSS Styles */
}

Смартфоны (альбомная ориентация)
@media only screen
and (min-width : 321px)
{
/* CSS Styles */
}

 Смартфоны (портретная ориентация)
@media only screen
and (max-width : 320px)
{
/* CSS Styles */
}

 iPad (портретная и альбомная ориентация)
@media only screen
and (min-device-width : 768px) 
and (max-device-width : 1024px)
{
/* CSS Styles */
}

iPad (альбомная ориентация)
@media only screen
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
{
/* CSS Styles */
}

 iPad (портретная ориентация)
@media only screen
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
{
/* CSS Styles */
}

 Настольные компьютеры и ноутбуки
@media only screen
and (min-width : 1224px)
{
/* CSS Styles */
}

 Большие экраны
@media only screen
and (min-width : 1824px)
{
/* CSS Styles */
}

 iPhone 4
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)
{
/* CSS Styles */
}

 Некоторые хаки:

По умолчанию iPhone Safari сжимает станицы сайта, что бы вместить его в экран. Следующий мета-тег говорит iPhone Safari использовать ширину устройства, как ширину окна и отключить сжим.


<meta name="viewport" content="width=device-width; initial-scale=1.0">

Для того, чтобы сделать изображения эластичными, просто добавьте max-width:100% и height:auto. Изображения max-width:100% и height:auto работает в IE7, но не работает в IE8 (еще один странный баг). Для исправления нужно добавить width:auto\9 для IE8.


img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

Для видео применяем те же правила, как для изображений. Но по непонятным причинам max-width:100% (для видео) не работает в Safari. Нужно использовать width: 100%.


.video embed,
.video object,
.video iframe {
width: 100%;
height: auto;
}

Место для вас

Добавить коментарий

кликните на картинку,
чтоб обновить код

Что за сайт

Этот сайт представляет унифицированную базу, где инфа собрана в единое целое, а не разбросанна по многочисленным сайтам, записям на листах бумаги или головам людей; а так же доступна круглосуточно не зависимо от кого-либо или чего-либо.

Будь в курсе

Интересненько

Вверх