<![CDATA[Форум BreezeMe.su — Добавим немного адаптивности сайту]]> http://forum.breezeme.su/topic/4684/ Thu, 06 Aug 2015 11:02:14 +0000 PunBB <![CDATA[Re: Добавим немного адаптивности сайту]]> http://forum.breezeme.su/post/49981/#p49981 В продолжении темы, добавим немного быстродействия сайту.
1. Перенести все ссылки подключения стилей и js'ок в конец кода, после тега </footer> но, до тега </body>.
2. Использовать кэш браузера, чтобы каждый раз пользователь не загружал контент заново переходя по страницам:
Для это добавим в файл .htaccess следующее

# Cache Images
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"

# Cache other content types (Flash, CSS, JS, HTML, XML)
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 2592000 seconds"
ExpiresByType application/javascript "access plus 2592000 seconds"
ExpiresByType application/x-javascript "access plus 2592000 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"

3. Для быстрой загрузки всех стилей, скриптов и страниц, необходимо сжать код. Для этого можно воспользоваться одним из следующих инструментов:

4. Сжимайте изображения которые добавляете на сайт.

]]> Thu, 06 Aug 2015 11:02:14 +0000 http://forum.breezeme.su/post/49981/#p49981 <![CDATA[Re: Добавим немного адаптивности сайту]]> http://forum.breezeme.su/post/49838/#p49838 http://s004.radikal.ru/i205/1508/ac/6caa4746c938.png
http://s017.radikal.ru/i417/1508/60/2e7205daa192.png

]]> Tue, 04 Aug 2015 16:32:51 +0000 http://forum.breezeme.su/post/49838/#p49838 <![CDATA[Re: Добавим немного адаптивности сайту]]> http://forum.breezeme.su/post/49837/#p49837 А сама могу добавить,что эта вещ очень удобная. Не приходится с телефона дофига тыкать в экран чтобы посмотреть любую информацию на сервере

]]> Tue, 04 Aug 2015 16:30:53 +0000 http://forum.breezeme.su/post/49837/#p49837 <![CDATA[Re: Добавим немного адаптивности сайту]]> http://forum.breezeme.su/post/49836/#p49836 По просьбе автора
http://s017.radikal.ru/i412/1508/29/8ccf813ade2a.png
http://s015.radikal.ru/i332/1508/9a/e6f51febb868.png

]]> Tue, 04 Aug 2015 16:29:32 +0000 http://forum.breezeme.su/post/49836/#p49836 <![CDATA[Re: Добавим немного адаптивности сайту]]> http://forum.breezeme.su/post/49807/#p49807 дубляж

]]> Tue, 04 Aug 2015 13:57:26 +0000 http://forum.breezeme.su/post/49807/#p49807 <![CDATA[Re: Добавим немного адаптивности сайту]]> http://forum.breezeme.su/post/49805/#p49805 Как это работает, можете посмотреть тут: http://supersite2015.zz.vc/

Зайдите на сайт с мобильного устройства или планшетика. А потом сравните с сайтом сервера smile
Это точный отпечаток главной страницы, никакого функционала она не несет.

]]> Tue, 04 Aug 2015 13:54:46 +0000 http://forum.breezeme.su/post/49805/#p49805 <![CDATA[Re: Добавим немного адаптивности сайту]]> http://forum.breezeme.su/post/49789/#p49789 Frost819 пишет:

Хах, на работе минутка свободная была просто

Красава)

]]> Tue, 04 Aug 2015 11:27:37 +0000 http://forum.breezeme.su/post/49789/#p49789 <![CDATA[Re: Добавим немного адаптивности сайту]]> http://forum.breezeme.su/post/49786/#p49786 Хах, на работе минутка свободная была просто

]]> Tue, 04 Aug 2015 10:56:29 +0000 http://forum.breezeme.su/post/49786/#p49786 <![CDATA[Re: Добавим немного адаптивности сайту]]> http://forum.breezeme.su/post/49785/#p49785 сагласен ето нечто нивираятнае

]]> Tue, 04 Aug 2015 10:55:35 +0000 http://forum.breezeme.su/post/49785/#p49785 <![CDATA[Re: Добавим немного адаптивности сайту]]> http://forum.breezeme.su/post/49784/#p49784 Ничоси!

]]> Tue, 04 Aug 2015 10:54:39 +0000 http://forum.breezeme.su/post/49784/#p49784 <![CDATA[Re: Добавим немного адаптивности сайту]]> http://forum.breezeme.su/post/49783/#p49783 дядя ви мой gерой!

]]> Tue, 04 Aug 2015 10:52:23 +0000 http://forum.breezeme.su/post/49783/#p49783 <![CDATA[Добавим немного адаптивности сайту]]> http://forum.breezeme.su/post/49782/#p49782 Данное сообщение скорее носит информативный характер для администрации.

Предыстория...

Решил было зайти на сайт сервера с мобильного устройства... И немножко ахнул, сайт не адаптивен, то есть не может подстраиваться под размеры экрана различных устройств!
Недолго думая, засучив рукава, вооружившись бутером и чаем, дописал код html разметки и... Вуаля, могу радоваться красивым дизом.

Исходники

Псевдокласс
Первым делом, добавим в тег <html> псевдокласс lang="ru", так мы определим язык который используется на страницах

<!DOCTYPE html>
<html lang="en">
<head>

Правим бутсртап
Создать адаптивный сайт, с использованием фиксированной ширины нельзя. По этому уберем из id "wrapper" параметр width: 1010px;

Далее откроем файл стилей бутстрапа найдем следующее: 

@media (min-width:1200px){.container{width:1170px}}

и заменим на 

@media (min-width:1200px){.container{width:1010px}}


ищем 

{.container{width:970px}}@media (min-width:1200px)

меняем на

{.container{width:1010px}}@media (min-width:1200px)

чтобы у нас осталась прежняя ширина сайта, но была возможность его "резиновой растяжки".

Со стилями вроде разобрались.
В темплейте ищем 

<div id="wrapper" class="clear-fix">

и заменяем на 

<div id="wrapper" class="container clear-fix">

Правим новости

Откроем main.css и добавим класс

.post-image{
  max-width: 100%;
  height: auto;
}

данная вставка позволит не вылезать изображению за пределы сетки, при изменении ширины сайта(будет автоматически подстраиваться под ширину). Данный класс необходимо так же добавить в шаблонизатор, пример:

<img class="post-image" alt="" src="https://i.imgur.com/r0QEFrP.jpg" align="none">

Изменим футер
Откроем main.css и удалим из класса .footer "width: 980px;"

Правим меню
В шаблоне главной ищем 

<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

заменим на 

<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">

так будет понятнее, что кнопку будет отвечать отдельный класс.

Два изображения в комплекте и архив с исходником, чтобы локально все проверить.
Это изменение касательно главной страницы, без учета статических и динамических страниц.
Как было:
https://pp.vk.me/c621630/v621630158/34c83/rfDarUi5lC4.jpg

Как стало:
https://pp.vk.me/c621630/v621630158/34c7a/cphvtZTgaCA.jpg

]]> Tue, 04 Aug 2015 10:49:30 +0000 http://forum.breezeme.su/post/49782/#p49782