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


Выбрать шаблон и создать сайт

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

#1 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 701 сообщений
  • Репутация: 405
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 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#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 ShowPrint

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

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

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

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

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

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

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

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


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


#4 hnerd

hnerd
  • Пользователь
  • 284 сообщений
  • Репутация: 18

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

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


  • 0


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