Самый лёгкий способ переделать дизайн сайта (резиновый, фиксированный) в адаптивный, под любое мобильное устройство, смартфон, кпк, планшет, netbook, notebook, smart tv

Самый лёгкий способ переделать дизайн сайта (резиновый, фиксированный) в адаптивный,  под любое мобильное устройство, смартфон, кпк, планшет, netbook, notebook, smart tv
Многие аналитики утверждают, что с каждым годом, будет появляться всё больше и больше интернет пользователей, которые будут находиться в сети именно с мобильных устройств, так как они имеют массу превосходство над стационарными компьютерами, самый очевидный, это мобильность. Вы можете взять его с собой куда угодно, а наличие публичных сетей не заставит вам чувствовать дискомфорт в полноценном пользовании. Ведь удобно во время поездки на работу находиться в сети интернет и быть в курсе последних новостей, курса валют и прочей важной для вас информации. В этой небольшой статье, я расскажу, как максимально простым способом, адаптировать ваш дизайн, под любое устройство. Это займёт у вас максимум полчаса, даже если вы полный ноль в css и html.

Поехали:

Для начала вам следует запустить свой ssh либо ftp клиент, или воспользоваться стандартной панелью управления, который предоставляет хостинг компания, для управления файлами на сервере, это может быть cPanel, ISPmanager, Plesk либо любой другой, на самом деле тут никакой разницы, написано просто к слову. Находим ваш индексный файл index.php, возможно у вас он другой, в моём случае это main.tpl, именно он отвечает за вывод основной информации главной страницы сайта, некую структуру, там подключаются стили css, Java Script, всякие разные мета теги и всё остальное что нам на данный момент совершенно ненужно, кроме выше написанного css файла, он тот самый который отвечает за дизайн вашего сайта. Так вот, трогать мы его не будет, а продублируем сам тег подключения, но вместо style.css пропишем mobile.css (или как вашей душе будет угодно, если сайт уже использует стиль mobile.css то можно mobile2.css), должно получится вот так:

<head>
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" /> <!-- Тут наш основной css стиль -->
<link rel="stylesheet" href="/css/mobile.css" type="text/css" media="screen" /> <!--  А вот этот мы только что добавили href="/css/mobile.css -->
.
.
</head>


В принципе можно даже не создавать новые стиль, а вписать правила для мобильных устройств, в основной стиль, но лучше создать отдельно, будет более понятно, удобней.

Так же нужно будет вставить между тегами , следующий мета тег:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Должно получиться как то так:
<head><meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/css/mobile.css" type="text/css" media="screen" />
.
.
</head>


Создаём стиль для мобильных устройств:

После проведённых, вышеописанных мною, манипуляций, заходим в ftp и создаём стиль тот самый который вы продублировали, тот самый "/css/mobile.css". Нажимаем "Создать файл" и в название прописываем "mobile.css". В моём случае, он находится в папке "css", у вас может быть где угодно. Можно даже создать папку "css" в корне сайта, в начальной директории, и уже в ней создать "mobile.css" Следует прописывать точный адрес файла, иначе работать не будет. Можно перепроверить, правильно вы его прописали либо нет, перейдя прямиком по ссылке http://ваш-сайт/css/mobile.css, если появится ошибка 404, то адрес ошибочен, если белая страничка, то всё сделано верно, а белая она потому, что мы еще туда ничего не написали, а как только напишем, там естественно появится содержание.

Теперь открываем его любым текстовым редактором, и вписываем следующее значение:


@media screen and (max-width: 350px){
.
.
.
}


То есть всё что между скобок "{ .... }" будет применяться в том случае, если размер экрана вашего посетителя, меньше чем 350 пикселей, в случае если размер превысит это значение, то будет применяться правило основного css стиля, в нашем случае "/css/style.css".

А теперь нам предстоит внести правила для мобильных аппаратов, с размером монитором менее 350 px, что и как туда вносить, я попытаюсь вам объяснить на примере этого сайта. На данный момент, вёрстка его "резиновая", она растягивается под размер монитора, то есть если посмотреть на сайт в свёрнутом браузере, а потом указателем мышки начать медленно растягивать размер окна браузера, то дизайн будет тянуться вслед за ним. Но как мы знаем, резина может растягиваться, но не сжиматься, сжиматься только тогда когда она растянута. Именно ту точку спокойного состояния и следует вычислять, это тот самый момент, когда можно применить некое другое правило для другого разрешения.

Давайте попробуем найти ту точку:

Самый лёгкий способ переделать дизайн сайта (резиновый, фиксированный) в адаптивный,  под любое мобильное устройство, смартфон, кпк, планшет, netbook, notebook, smart tv


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

На этом этапе, нам предстоит выяснить, какой стиль, нам мешает дальнейшее сужение сайта. Кликаем правой кнопки мыши в браузере, и выбираем "Проинспектировать элемент", методом перебора, div классов, мы находим тот самый, чьи параметры не позволяют сайту стать значительней уже.

Самый лёгкий способ переделать дизайн сайта (резиновый, фиксированный) в адаптивный,  под любое мобильное устройство, смартфон, кпк, планшет, netbook, notebook, smart tv


На картинке выше, мы обнаружили тот класс, который портит всю малину. Нашли мы его с помощью перебора классов, начиная с самого верхнего заканчивая им. Достаточно пройтись по всем заданным параметрам "width", этим тегом задаётся именно ширина, и если мы пытаемся сузить сайт, то конечно нам нужна именно она. Снимая галочки с параметра "width", я наткнулся на "width: 75%;", после того как убрал галочку значение приобрело размер 100%, и сайт полностью вписался в окошко браузера.

Теперь нам нужно продублировать значение этого класса, в наш созданный стиль для мобильных устройств:

Самый лёгкий способ переделать дизайн сайта (резиновый, фиксированный) в адаптивный,  под любое мобильное устройство, смартфон, кпк, планшет, netbook, notebook, smart tv


Как только мы скопировали div class, как показано на картинке выше.

#container { 
height: 100%;
margin: 0px auto;
padding: 0px;
width: 75%;
}


Нам нужно удалить всё лишнее, исправить "75%" на "100%" и добавить в наш приготовленный стиль "mobile.css". Тут нас интересует только ширина "width", поэтому оставляем только её, остальное всё удаляем. Должно получится так:

@media screen and (max-width: 350px){
#container { 
width: 100%;
}
}


Еще мне пришлось задать 100% следующим классам:

.post-date { 
background: url("http://drawmoney.ru/templates/Blogin/images/date-bg.gif") no-repeat transparent;
float: left;
height: 50px;
margin: 0px;
padding: 0px;
width: 50px; /* поменял на 100% */
}
.head { 
color: #131600;
font-size: 1.01em;
line-height: 1.11em;
padding: 3px 20px 0px 55px; /* заменил на padding: 3px  */
}


И всё получилось довольно неплохо, но вот картинки публикуемые в статьях, были весьма большие, и остались только они, те кто мешал дальнейшим сужению сайта, пришлось дописать вот такой стиль, он присваивается ко всем изображениям, которые находятся в классе "content_txt", с помощью "width" я задал ширину всем изображениям, в процентах "width: 90"


.content_txt img { 
border: 3px solid #B8B8B8;
margin: 5px;
width: 90%;


В итоге у меня получился вот такой css код:

@media screen and (max-width: 350px){
#container { 
width: 100%;
}
.post-date { 
width: 100%; /* поменял на 100% */
}
.head { 
padding: 3px; /* заменил на padding: 3px  */
}
.content_txt img { 
border: 3px solid #B8B8B8;
margin: 5px;
width: 90%
}



После всего проделанного, пользователи чей размер дисплея не больше 350 пикселей, будет получать совершенно другие правила для исполнения, черпая их из файла "mobile.css"

Аналогичным образом, можно подстроить совершенно любой дизайн, под любые размеры экранов. Рассчитать размер превьюшек для разных размеров монитора, скрыть тот или иной блок. Допустим если нельзя откорректировать рекламный материал, под мобильное устройство, достаточно будет добавить свойство "display:none" и обернуть классом к которому оно было присвоено, тот или иной материал. В итоге реклама перестанет транслироваться, Юона будет просто скрыта.

Пример:

.not-mobile {display:none;}


А вот если вы хотите сделать полностью противоположное действие, показывать некий блок только на мобильном устройстве то добавляем в "mobile.css":

.da-mobile {display:block;}


В css для мобильных устройств, а в оригинальном, "style.css" прописываем:

.da-mobile {display:none;}


Этот вариант будет выводить содержимое div класса "da-mobile" , только на мобильных устройствах.

Smart TV и прочие экраны с большой диагональю

Самый лёгкий способ переделать дизайн сайта (резиновый, фиксированный) в адаптивный,  под любое мобильное устройство, смартфон, кпк, планшет, netbook, notebook, smart tv


Чтобы на сайте можно было отлично себя чувствовать, просматривая его на экране большого монитора, либо огромного жидкокристаллического, плазменного, и т.п. телевизора. Будет достаточно составить css стиль, и подключить его между тегами , следующим образом:

<link rel="stylesheet" href="/css/smart-tv.css" type="text/css"  media="only screen and (max-width:2000px)" />


Этот стиль вступит в силу, если экран более 2000 пикселей, для настройки вам придётся немного поэкспериментировать.