Адаптивный шаблон - нужен помощь (совет)

Автор Тема: Адаптивный шаблон - нужен помощь (совет)  (Прочитано 1906 раз)

Оффлайн xwildxАвтор темы

  • Бизнес оценка: (0)
  • Постоялец
  • ***
  • СПАСИБО: 29
  • Сообщений: 144
  • Карма: 5
  • Пол: Мужской
  • Нет ВОЙНЕ!
    • Просмотр профиля
    • Все о рыбалке.

Оффлайн xwildxАвтор темы

  • Постоялец
  • ***
  • Доп. информация
    • Бизнес оценка: (0)
    • СПАСИБО: 29
    • Сообщений: 144
    • Карма: 5
    • Пол: Мужской
    • Нет ВОЙНЕ!
      • Просмотр профиля
      • Все о рыбалке.
1
Решил переделать шаблон сайта в адаптивный. До этого никогда такого не делал, начал изучать вопрос в принципе ничего сложного не увидел. Но не знаю как будет лучше. Требуется совет как будет лучше (правильней):
1. Для разных разрешений сделать свой css файл и подключить их таким образом
<link rel='stylesheet' href='URL_по_умолчанию.css' />
<link rel='stylesheet' media='(min-width: 480px)' href='1.css' />
<link rel='stylesheet' media='(max-width: 480px)' href='2.css' />
<link rel='stylesheet' media='(max-width: 640px)' href='3.css' />
....

2. Или в одном css  через media
@media (min-width: 480) { бла бла бла}
@media (max-width: 480) and { бла бла бла}
@media (max-width: 640px) { бла бла бла}
....
Будет ли в первом варианте браузер грузить все css, или же будет грузить только нужный, и создаст ли первый вариант дополнительные запросы. И вроде как IE это не понимает.
При  втором способе понятно css нехило разрастется в размере.
Посоветуйте как будет лучше?
Или сделать через java понимают все и грузится нужный css но вдруг java офф
« Последнее редактирование: 06-05-2015, 16:27:36 от xwildx »
Рыбалка - Все о рыбалке в России.


Оффлайн ВикторияИ

  • Бизнес оценка: (0)
  • КМС
  • *****
  • СПАСИБО: 3061
  • Сообщений: 4108
  • Карма: 191
  • и да прибудет с Вами Сила.
  • Награды Автор самой интересной темы Более одной тысячи спасибо КМС поисковой оптимизации
    • Просмотр профиля
    • Заказ автобуса в Одессе
  • Доп. информация
    • Бизнес оценка: (0)
    • СПАСИБО: 3061
    • Сообщений: 4108
    • Карма: 191
    • и да прибудет с Вами Сила.
    • Награды Автор самой интересной темы Более одной тысячи спасибо КМС поисковой оптимизации
      • Просмотр профиля
      • Заказ автобуса в Одессе
При  втором способе понятно css нехило разрастется в размере.

делаю именно таким способом - пока проблем со скоростью загрузки не наблюдаю, но в принципе меня тоже интересует Ваш вопрос...

Оффлайн Haosame

  • Бизнес оценка: (0)
  • Пользователь
  • **
  • СПАСИБО: 65
  • Сообщений: 88
  • Карма: 12
  • Пол: Женский
  • Путь в тысячу ли начинается с первого шага.
    • Просмотр профиля
    • Блог web-программиста

Оффлайн Haosame

  • Пользователь
  • **
  • Доп. информация
    • Бизнес оценка: (0)
    • СПАСИБО: 65
    • Сообщений: 88
    • Карма: 12
    • Пол: Женский
    • Путь в тысячу ли начинается с первого шага.
      • Просмотр профиля
      • Блог web-программиста
Чаще всего видела именно второй вариант. Когда разные размеры описаны в одном файле.

По первому варианту сдается мне что у клиента будут грузится все файлы. Причем весьма в интересном порядке, если размеры у него 640. Сначала загрузится основной файл, потом два 480, потом наконец 640.

Как показывает опыт, чем больше файлов грузится, тем дольше ответ от страницы. Лучше пусть будет один файл побольше. В конце концов кто вам мешает засунуть его потом в какой-нибудь сервис по минимизации CSS-файлов.

Оффлайн alexandrius

  • Бизнес оценка: (0)
  • Постоялец
  • ***
  • СПАСИБО: 21
  • Сообщений: 104
  • Карма: 3
  • Пол: Мужской
    • Просмотр профиля
    • Города Белоруссии

Оффлайн alexandrius

  • Постоялец
  • ***
Я тоже считаю 2 вариант наилучшим. Да и код не сильно разрастётся, если правильно всё прописать. Ведь большинство свойств, прописанных в css останутся неизменными, так как не зависят от размера области просмотра...

А насчёт 1 способа Haosame верно пишет! Гугл ругается, даже когда 1 внешний css файл есть и просит всё встроить в html. Если файлов несколько будет, то ещё сильней ругаться будет...
Информация обо всех городах Белоруссии здесь: http://gorbel.ru/

Оффлайн bibika

  • Бизнес оценка: (0)
  • Ветеран
  • *****
  • СПАСИБО: 218
  • Сообщений: 772
  • Карма: 19
  • Пол: Мужской
    • Просмотр профиля
    • Просветительская интернет-программа “Моллюски”

Оффлайн bibika

  • Ветеран
  • *****
В первом случае более удобно править код, но подключать кучу файлов это лишняя нагрузка. Поэтому тоже голосую за второй вариант. У себя я так делал есть основной файл стилей и дополнительный с @media (min-width: 480) { бла бла бла}


Оффлайн ВикторияИ

  • Бизнес оценка: (0)
  • КМС
  • *****
  • СПАСИБО: 3061
  • Сообщений: 4108
  • Карма: 191
  • и да прибудет с Вами Сила.
  • Награды Автор самой интересной темы Более одной тысячи спасибо КМС поисковой оптимизации
    • Просмотр профиля
    • Заказ автобуса в Одессе
  • Доп. информация
    • Бизнес оценка: (0)
    • СПАСИБО: 3061
    • Сообщений: 4108
    • Карма: 191
    • и да прибудет с Вами Сила.
    • Награды Автор самой интересной темы Более одной тысячи спасибо КМС поисковой оптимизации
      • Просмотр профиля
      • Заказ автобуса в Одессе
интересно бы узнать насколько сложно осуществление ПХП-подстановки нужного файла CSS в зависимости от разрешения пользователя...

Оффлайн Андрей88

  • Бизнес оценка: (0)
  • КМС
  • *****
  • СПАСИБО: 905
  • Сообщений: 1693
  • Карма: 219
  • Пол: Мужской
  • Андерс
  • Награды Мастер поисковой оптимизации Автор самой интересной темы
    • Просмотр профиля
    • Создай сам
  • Доп. информация
    • Бизнес оценка: (0)
    • СПАСИБО: 905
    • Сообщений: 1693
    • Карма: 219
    • Пол: Мужской
    • Андерс
    • Награды Мастер поисковой оптимизации Автор самой интересной темы
      • Просмотр профиля
      • Создай сам
Второй вариант правильнее, но есть еще и третий вариант:
все стили, которые в медиазапросах сжать и залить с подключением в head, а второй документ, без медиазапросов не сжимать и также подключить, два файла css это норма. Даже пресловутый бутстрап грузит их три, если я не ошибаюсь.
YouTube — уроки программирования (Front End).


 

Похожие темы

  Тема / Автор Ответов Последний ответ
2 Ответов
1209 Просмотров
Последний ответ 26-12-2011, 19:23:19
от _XyJIuGaN_
0 Ответов
870 Просмотров
Последний ответ 12-04-2015, 18:17:14
от CeSaR
2 Ответов
1218 Просмотров
Последний ответ 16-05-2015, 22:48:06
от anpilov2007
0 Ответов
2059 Просмотров
Последний ответ 09-06-2016, 21:16:52
от MoJo
2 Ответов
1554 Просмотров
Последний ответ 29-01-2018, 11:55:28
от Олег Ку