Перейти к содержимому



Адаптивный дизайн, посоветуйте, плз...

#1

Поделиться сообщением #1



ShowPrint

ShowPrint
  • Пользователь PRO
  • 2 304 сообщений
  • Репутация: 591
0

Отправлено 13 Апрель 2015 - 03:12

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

Озадачился этим вопросом, почитал рунет...

Не отношу себя к профессионалам (уровень знаний и опыта достаточно средненький) и движками не пользуюсь и делаю верстку "ручками". По этой причине склоняюсь к экспериментам использования CSS3 Media Queries (почитал о Bootstrap, но понял что на освоение уйдет очень много времени, возможно в перспективе). На Хабре нашел следующий пост http://habrahabr.ru/post/119127/ о CSS3 Media Queries и планирую "пройтись" по нему...

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

Может ли кто-нибудь что-то рекомендовать еще доступно изложенные материалы (может сталкивался или пользовался) на тему адаптивной ручной верстки с учетом моих вышеизложенных "особенностей"?

Готов принять и изучить любые ссылки...

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

Подробнее:http://siteclinic.ru...adaptirovat-say


 

 

  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Оптимальная ширина сайта при фиксированном дизайне
  2. [Вопрос] Мобильная версия сайта vs адаптивный дизайн?
  3. Адаптивный дизайн для wordpress
  4. Тренды в дизайне сайтов на 2015 год
  5. Определяемся с выбором — адаптивный дизайн или мобильная версия

#2

Поделиться сообщением #2



hnerd

hnerd
  • Неактивные
  • 284 сообщений
  • Репутация: 18

Отправлено 14 Апрель 2015 - 20:48

Если знаете css, то будет проще.

 

Добавляете в шапку сайта в теги head, где метатеги этот код:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes" />

А в css верстаете на 3 экрана и используете:

@media (min-width: 1200px) 
@media (max-width: 767px) 
@media (min-width: 768px) and (max-width: 1199px)

  

 


  • 1

#3

Поделиться сообщением #3



ShowPrint

ShowPrint
    Topic Starter
  • Пользователь PRO
  • 2 304 сообщений
  • Репутация: 591

Отправлено 14 Апрель 2015 - 21:07

@hnerd, спасибо большое!

CSS знаю "со словарем", но умею разбираться, не ленюсь читать - разберусь и в этом... )))

С "метой" еще поразбираюсь - Вы новую (для меня) формулировку  привели... Я на данный момент просто из рекомендаций Гоши вставил:

<meta name='viewport' content='width=device-width, initial-scale=1'>

Эх, где наша не пропадала, Яша с Гошей нас без работы не оставит...

Еще раз спасибо, сверстаю - поделюсь ссылочкой "для приёма критики"...


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#4

Поделиться сообщением #4



hnerd

hnerd
  • Неактивные
  • 284 сообщений
  • Репутация: 18

Отправлено 15 Апрель 2015 - 15:49

Пожалуйста!!!


  • 0


Оформление форума – IPBSkins.ru