Адаптивность в создании сайтов
Адаптивность с помощью CSS
Строки кода CSS, которые Я написал ниже, помогут Вам понять суть идеи адаптивности с помощью CSS.
Применение стилей в зависимости от разрешения экрана:
/*Стиль будет применяться при ширине экрана большей 1000 пикселей*/
@media screen and (min-width: 1000px) {
body { color:red; }
}
/*Стиль будет применяться при ширине экрана меньшей 1600 пикселей*/
@media screen and (max-width: 1600) {
body { color:red; }
}
/*Стиль будет применяться при ширине экрана большей 1000 пикселей и меньшей 1600 пикселей*/
@media screen and (min-width: 1000px) and (max-width: 1600px) {
body { color:red; }
}
// Для высоты (height) аналогично
Применение стилей в зависимости от ориентации устройства (портретная, ландшафтная):
/*Стиль будет применяться при ландшафтном(альбомном) расположении экрана*/
@media screen and (orientation: landscape) {
body { color:red; }
}
/*Стиль будет применяться при ширине портретном расположении экрана*/
@media screen and (orientation: portrait) {
body { color:red; }
}
Адаптация с помощью JavaScript
Еще один, простой способ сделать сайт адаптивным - это динамическое изменение размера сайта в зависимости от размера экрана.
Суть этого метода такова:
Имеем HTML страницу:
<HTML> <HEAD> <TITLE>Адаптация с помощью JavaScript</TITLE> <link rel="stylesheet" type="text/css" href="css/style.css"> <script src="js/jquery-2.1.3.min.js"></script> <script src="js/myscript.js"></script> </HEAD> <BODY> <div class="head_block"></div> <div class="main_content"></div> <div class="footer"></div> </BODY> </HTML>
Как видно из кода, у нас есть 3 блока "head_block - самый верхний блок(логотипы, верхнее меню и т.п.)", "main_content - блок с основным содержимым сайта", "footer - так называемый футер, или низ страницы".
Добавляем динамическое изменение с помощью JavaScript.
// Берем размер экрана пользователя
var devWidth = $(window).width();
// Размеры блоков при загрузке страницы
$(document).ready(function() {
// Выставляем ширину для всех блоков равной ширине устройства
$(".head_block").width(devWidth);
$(".main_content").width(devWidth);
$(".footer").width(devWidth);
});
// Изменение размеров блоков при событии изменения размеров экрана
$(window).resize(function() {
$(".head_block").width(devWidth);
$(".main_content").width(devWidth);
$(".footer").width(devWidth);
});
// Изменение размеров блоков при событии изменения ориентации дисплея
window.addEventListener("orientationchange", function() {
$(".head_block").width(devWidth);
$(".main_content").width(devWidth);
$(".footer").width(devWidth);
});
Также можно применять фиксированные значения в зависимости от разрешения экрана:
// Берем размер экрана пользователя
var devWidth = $(window).width();
// Размеры блоков при загрузке страницы
// Аналогично будут строится и реакции на другие события
$(document).ready(function() {
// Для экранов больше 600, но меньше 1000 пикселей
if(devWidth>600 && devWidth<1000) {
$(".head_block").width(700);
$(".main_content").width(700);
$(".footer").width(700);
}
// Для экранов больше 1000, но меньше 1600 пикселей
else if(devWidth>1000 && devWidth<1600) {
$(".head_block").width(1200);
$(".main_content").width(1200);
$(".footer").width(1200);
}
// Для остальных экранов, которые не подошли под предыдущие условия
else {
$(".head_block").width(1800);
$(".main_content").width(1800);
$(".footer").width(1800);
}
// Внимание! последнее условие также сработает на мобильные устройства
// с небольшим разрешением (320, 480 пикселей), т.к. они не подходят
// ни под одно наше условие
});
Помощь PHP в адаптации
В самом языке нету каких либо определенных функций, с помощью которых можно было адаптировать сайт под мобильные устройства.Но! Язык PHP может помочь в адаптации сайта с помощью специальных плагинов, которые могут определять является ли устройство мобильным(планшет, телефон) или нет. А уже исходя из этого определения, можно подключать отдельные JavaScript скрипты или CSS стили, специально подготовленные для мобильных устройств.
Одним из таких плагинов является Mobile Detect. Это небольшой, простой в использовании плагин, который позволяет определить является ли устройство мобильным, какая операционная система используется на устройстве, а также какой браузер. Впринцепи, эти параметры можно "поймать" и самим, но т.к. мы на начале нашего пути, эти подробности опустим.
Самым простым способом использования плагина Mobile Detect это определение, является ли устройство мобильным или нет:
<?
// Подключаем плагин
require_once 'Mobile_Detect.php';
// Создаем объект
$detect = new Mobile_Detect;
// Проверяем является ли устройство мобильным
if ( $detect->isMobile() ) {
// Устройство мобильное, подключаем определенные стили и скрипты
}
?>
Более подробно о плагине Mobile Detect можно почитать на официальном сайте Mobile Detect
Скачать плагин Mobile Detect
Это основы адаптации сайта под различные устройства. Но все же основным методом адаптации сайта является HTML - верстка.
