1 Тема от Frost819

  • Откуда: МОСКВААААААААА
  • Зарегистрирован: 01.08.2015
  • Сообщений: 17
  • Спасибо: 15

Тема: Добавим немного адаптивности сайту

Данное сообщение скорее носит информативный характер для администрации.

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

Решил было зайти на сайт сервера с мобильного устройства... И немножко ахнул, сайт не адаптивен, то есть не может подстраиваться под размеры экрана различных устройств!
Недолго думая, засучив рукава, вооружившись бутером и чаем, дописал код 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

Post's attachments

htdocs.rar 207.28 kb, 4 downloads since 2015-08-04 

You don't have the permssions to download the attachments of this post.
Клан: MEME
Ник: Frost #819
<?php $lel="SSBhbSBCZXN0" echo base64_decode($lel); ?>
Спасибо сказали: baibro, DmuTPuK, tsuki, Natasha_K4

2 Ответ от Android1337

  • Откуда: укройна
  • Зарегистрирован: 22.01.2015
  • Сообщений: 520
  • Спасибо: 173

Re: Добавим немного адаптивности сайту

дядя ви мой gерой!

витирайте ноги слава украини
шяс би в футбольчик!)))

3 Ответ от Wild

  • Wild
  • Wild
  • Администратор
  • Offline
  • Зарегистрирован: 02.02.2014
  • Сообщений: 3,753
  • Спасибо: 665

Re: Добавим немного адаптивности сайту

Ничоси!

She's a wild child
And her l-l-love turns a man insane
She's a wild child
And the love she makes rocks the mind off my brain

4 Ответ от Android1337

  • Откуда: укройна
  • Зарегистрирован: 22.01.2015
  • Сообщений: 520
  • Спасибо: 173

Re: Добавим немного адаптивности сайту

сагласен ето нечто нивираятнае

витирайте ноги слава украини
шяс би в футбольчик!)))

5 Ответ от Frost819

  • Откуда: МОСКВААААААААА
  • Зарегистрирован: 01.08.2015
  • Сообщений: 17
  • Спасибо: 15

Re: Добавим немного адаптивности сайту

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

Клан: MEME
Ник: Frost #819
<?php $lel="SSBhbSBCZXN0" echo base64_decode($lel); ?>
Спасибо сказали: Android13371

6 Ответ от DmuTPuK

  • DmuTPuK
  • Страшный сон
  • Offline
  • Откуда: Украина
  • Зарегистрирован: 04.02.2014
  • Сообщений: 2,539
  • Спасибо: 501

Re: Добавим немного адаптивности сайту

Frost819 пишет:

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

Красава)

Дата регистрации: 4 ноября 2013 в 17:25

7 Ответ от Frost819

  • Откуда: МОСКВААААААААА
  • Зарегистрирован: 01.08.2015
  • Сообщений: 17
  • Спасибо: 15

Re: Добавим немного адаптивности сайту

Как это работает, можете посмотреть тут: http://supersite2015.zz.vc/

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

Клан: MEME
Ник: Frost #819
<?php $lel="SSBhbSBCZXN0" echo base64_decode($lel); ?>

8 Ответ от Frost819 (04.08.2015 16:58:02 отредактировано Frost819)

  • Откуда: МОСКВААААААААА
  • Зарегистрирован: 01.08.2015
  • Сообщений: 17
  • Спасибо: 15

Re: Добавим немного адаптивности сайту

дубляж

Клан: MEME
Ник: Frost #819
<?php $lel="SSBhbSBCZXN0" echo base64_decode($lel); ?>

9 Ответ от tsuki

  • tsuki
  • tsuki
  • В курсе событий
  • Offline
  • Зарегистрирован: 08.03.2015
  • Сообщений: 1,527
  • Спасибо: 517

Re: Добавим немного адаптивности сайту

По просьбе автора
http://s017.radikal.ru/i412/1508/29/8ccf813ade2a.png
http://s015.radikal.ru/i332/1508/9a/e6f51febb868.png

ЖМИ НА РЫЧАГ КРОНК

10 Ответ от tsuki

  • tsuki
  • tsuki
  • В курсе событий
  • Offline
  • Зарегистрирован: 08.03.2015
  • Сообщений: 1,527
  • Спасибо: 517

Re: Добавим немного адаптивности сайту

А сама могу добавить,что эта вещ очень удобная. Не приходится с телефона дофига тыкать в экран чтобы посмотреть любую информацию на сервере

ЖМИ НА РЫЧАГ КРОНК

11 Ответ от tsuki

  • tsuki
  • tsuki
  • В курсе событий
  • Offline
  • Зарегистрирован: 08.03.2015
  • Сообщений: 1,527
  • Спасибо: 517

Re: Добавим немного адаптивности сайту

http://s004.radikal.ru/i205/1508/ac/6caa4746c938.png
http://s017.radikal.ru/i417/1508/60/2e7205daa192.png

ЖМИ НА РЫЧАГ КРОНК

12 Ответ от Frost819 (06.08.2015 15:04:29 отредактировано Frost819)

  • Откуда: МОСКВААААААААА
  • Зарегистрирован: 01.08.2015
  • Сообщений: 17
  • Спасибо: 15

Re: Добавим немного адаптивности сайту

В продолжении темы, добавим немного быстродействия сайту.
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. Сжимайте изображения которые добавляете на сайт.

Клан: MEME
Ник: Frost #819
<?php $lel="SSBhbSBCZXN0" echo base64_decode($lel); ?>