BigAp.ru — интернет-магазин электроники и бытовой техники

Автор Тема: Адаптивная верстка  (Прочитано 773 раз)

0 Пользователей и 1 Гость просматривают эту тему.

Оффлайн ugaeva.mar

  • Юзер
  • *
  • Сообщений: 9
  • Karma: +0/-0
  • Пол: Женский
    • Share Post
Адаптивная верстка
« : Март 12, 2016, 09:56:13 am »
Здравствуйте, хочу научиться адаптивной верстке. знаю только язык html css. Есть ли какие то понятные уроки или книги как быстро научиться адаптивной верстке. В интернет лазию читаю, а правильно все равно не получается. Не получается сообразить как сделать свой сайт адаптивным. Спасибо за советы.

 

Оффлайн major_jacks

  • Опытный пользователь
  • ***
  • Сообщений: 103
  • Karma: +7/-0
    • Share Post
Re: Адаптивная верстка
« Ответ #1 : Март 12, 2016, 10:28:52 am »
Для адаптивной верстки Ваших знаний не достаточно, html css - не являются языками программирования. Начните с изучения php.

Оффлайн sysadmin

  • Administrator
  • сисадми́н
  • *****
  • Сообщений: 8576
  • Karma: +117/-0
  • Пол: Мужской
    • Share Post
    • сайт для сис. админов и не только...
Re: Адаптивная верстка
« Ответ #2 : Март 12, 2016, 01:08:55 pm »
Есть несколько быстрых решений:
1. Использовать селекторы @media only в CSS или media='screen...
2. Использовать масштабирование при помощи метатега viewport
3. использовать JavaScript для автоматического выставления размеров div блоков под различные размеры экрана
4. Использовать фреймворки типа Bootstrap
дорогу осилит идущий...
......................
MCP, MCTS, RHCSA
......................
also aka xck...

Оффлайн CyberPunk 2050

  • Сообщество ИТ-Специалистов
  • сисадми́н
  • *****
  • Сообщений: 1193
  • Karma: +51/-0
  • Пол: Мужской
  • Местный IP-шник. Работаю в DHCP.
    • Share Post
Re: Адаптивная верстка
« Ответ #3 : Март 12, 2016, 02:55:08 pm »
Я бы на вашем месте сначала бы изучил PHP а потом взялся бы за какой нибудь фреймворк
Одной мотивации недостаточно: если у вас есть идиот и вы его мотивировали, то в результате вы получите мотивированного идиота. Джим Рон

Оффлайн ugaeva.mar

  • Юзер
  • *
  • Сообщений: 9
  • Karma: +0/-0
  • Пол: Женский
    • Share Post
Re: Адаптивная верстка
« Ответ #4 : Март 15, 2016, 02:54:53 pm »
Выбрала курсы пойду учить php. Спасибо :wink:

Оффлайн sysadmin

  • Administrator
  • сисадми́н
  • *****
  • Сообщений: 8576
  • Karma: +117/-0
  • Пол: Мужской
    • Share Post
    • сайт для сис. админов и не только...
Re: Адаптивная верстка
« Ответ #5 : Март 15, 2016, 03:49:30 pm »
Если "пару страниц" надо сделать, можно обойтись чистым HTML5 используя HTML+CSS, примеры приведены на том же Bootstrap - http://getbootstrap.com/getting-started/#examples, несколько адаптивных страниц или лендинг страницу с информацией о Вашей компании можно сделать за несколько часов не написав ни строчки PHP кода (как например эта - http://lab.sys-admin.kz/)... С учетом того, что готовых примеров масса, вот например:
http://blackrockdigital.github.io/startbootstrap-freelancer/

Исходный код стягиваете от сюда:
https://github.com/BlackrockDigital/startbootstrap-freelancer

Изменяете названия, цвета, изображения и страница готова, если необходимо созданный HTML шаблон можно так же адаптировать под любимую cms...

« Последнее редактирование: Март 15, 2016, 04:31:57 pm от sysadmin »

Оффлайн sysadmin

  • Administrator
  • сисадми́н
  • *****
  • Сообщений: 8576
  • Karma: +117/-0
  • Пол: Мужской
    • Share Post
    • сайт для сис. админов и не только...
Re: Адаптивная верстка
« Ответ #6 : Март 15, 2016, 04:29:15 pm »
Что за курсы, если не секрет?

Оффлайн ugaeva.mar

  • Юзер
  • *
  • Сообщений: 9
  • Karma: +0/-0
  • Пол: Женский
    • Share Post
Re: Адаптивная верстка
« Ответ #7 : Март 15, 2016, 05:28:52 pm »
itstep.kz, я туда еще не звонила, я на их сайт заходила. Там форма обучения выходного дня.

Оффлайн ugaeva.mar

  • Юзер
  • *
  • Сообщений: 9
  • Karma: +0/-0
  • Пол: Женский
    • Share Post
Re: Адаптивная верстка
« Ответ #8 : Март 15, 2016, 05:32:35 pm »
Кто ни будь может посоветовать курсы по верстке. Что бы в вечернее время ходить.

Оффлайн Shrek

  • Опытный пользователь
  • ***
  • Сообщений: 177
  • Karma: +11/-0
    • Share Post
Re: Адаптивная верстка
« Ответ #9 : Март 15, 2016, 05:41:43 pm »
А почему PHP, а не Phyton+Django?

Оффлайн sysadmin

  • Administrator
  • сисадми́н
  • *****
  • Сообщений: 8576
  • Karma: +117/-0
  • Пол: Мужской
    • Share Post
    • сайт для сис. админов и не только...
Re: Адаптивная верстка
« Ответ #10 : Март 15, 2016, 06:24:01 pm »
Не надо никуда ходить, видео мануалов куча, заходите на YouTube и ищите что то на подобии:

https://m.

Оффлайн CyberPunk 2050

  • Сообщество ИТ-Специалистов
  • сисадми́н
  • *****
  • Сообщений: 1193
  • Karma: +51/-0
  • Пол: Мужской
  • Местный IP-шник. Работаю в DHCP.
    • Share Post
Re: Адаптивная верстка
« Ответ #11 : Март 15, 2016, 06:25:16 pm »
И не говори...

По PHP еще больше уроков... youtube тебе в помощь!

Оффлайн ugaeva.mar

  • Юзер
  • *
  • Сообщений: 9
  • Karma: +0/-0
  • Пол: Женский
    • Share Post
Re: Адаптивная верстка
« Ответ #12 : Март 15, 2016, 11:01:58 pm »
Спасибо за ссылки и видео. Я посмотрела.  :smile3:

Оффлайн Barbariska

  • Юзер
  • *
  • Сообщений: 5
  • Karma: +0/-0
    • Share Post
Re: Адаптивная верстка
« Ответ #13 : Май 18, 2016, 12:58:28 am »

3. использовать JavaScript для автоматического выставления размеров div блоков под различные размеры экрана

Можно пример? Не сталкивалась с таким способом.

Для адаптивной верстки Ваших знаний не достаточно, html css - не являются языками программирования. Начните с изучения php.
Сейчас не столько адаптивная, сколько респонсив верстка нужна, и не сказала бы php для нее маст хэв. Если говорить чисто о верстке, а не сайтах под ключ.
Да и то, многие доморощенные фронтэндеры на джумле лендинги клепают вообще не зная ни php ни html по сути. Главное для них предоплату стребовать :) Гляньте на фрилансере -  через платежные терминалы кассы 24 требуют предоплату или номера кошельков WM сразу вывешены, а что там за результат по факту будет - еще бабка надвое сказала.
« Последнее редактирование: Май 23, 2016, 01:57:39 pm от Barbariska »

Оффлайн sysadmin

  • Administrator
  • сисадми́н
  • *****
  • Сообщений: 8576
  • Karma: +117/-0
  • Пол: Мужской
    • Share Post
    • сайт для сис. админов и не только...
Re: Адаптивная верстка
« Ответ #14 : Май 26, 2016, 11:14:14 am »
Я использовал такой метод:
<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel='stylesheet' media='screen and (max-width: 610px)' href='css/minstyle.css' />
<link rel='stylesheet' media='screen and (min-width: 611px) and (max-width: 800px)' href='css/middle.css' />
<link rel='stylesheet' media='screen and (min-width: 801px)'href="css/style.css" />
<link rel="stylesheet" media='screen and (min-width: 801px)' href="css/words.css" />

Вы не путайте, сейчас важно клиенту - А - отображение на десктопе, Б - на планшете, В - Смартфоне... все эти вещи можно сделать используя "мой" метод, или взять тот же бутстрап, для конечного клиента прозрачно что именно Вы будете использовать, ему важен результат, результата можно добиться, как минимум этими двумя способами...

Действительно, в отношении php - я его практически не знаю.. сейчас главное владеть основами HTML, CSS и JavaScript, за всю свою практику наклепал множество сайтов, нигде не понадобилось знание php... ну если только самую малость )) Малого того, не рассматриваю php в принципе как платформу для реализации web платформ...
« Последнее редактирование: Май 26, 2016, 11:16:58 am от sysadmin »