X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Помогите с версткой пожалуйста
matador2011
matador2011
Topic Starter сообщение 7.4.2016, 0:39; Ответить: matador2011
Сообщение #1


Участник
***

Группа: User
Сообщений: 165
Регистрация: 15.12.2011
Поблагодарили: 18 раз
Репутация:   4  


Интересует как сверстать мобильную версию сайта, вернее как меня блоки местами? прикрепил изображение, для больших экранов расположение блоков одно, для телефонов другое. Подскажите как реализовать, можно на bootstrap.
Эскизы прикрепленных изображений
Прикрепленное изображение
 
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
jjoret
jjoret
сообщение 7.4.2016, 0:52; Ответить: jjoret
Сообщение #2


Завсегдатай
*****

Группа: Active User
Сообщений: 791
Регистрация: 29.11.2011
Из: Беларусь
Поблагодарили: 169 раз
Репутация:   45  


Вообще не проблема, напиши свой скайп в личку, помогу


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
hamer121
hamer121
сообщение 7.4.2016, 2:01; Ответить: hamer121
Сообщение #3


Частый гость
**

Группа: User
Сообщений: 79
Регистрация: 9.1.2012
Из: Санкт-Петербург
Поблагодарили: 30 раз
Репутация:   4  


Делается на CSS с помощью media запросов. Т.е. у вас есть определенные "переломные" точки - разные расширения экранов, при которых вы указываете как именно должны располагаться блоки.
Для ознакомления можете глянуть здесь
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
falken
falken
сообщение 7.4.2016, 2:44; Ответить: falken
Сообщение #4


online
*******

Группа: Ex-Moderator
Сообщений: 3742
Регистрация: 23.3.2011
Поблагодарили: 3986 раз
Репутация:   361  


Цитата(matador2011 @ 6.4.2016, 23:39) *
Интересует как сверстать мобильную версию сайта

Никогда не понимал смысла таких вопрос, которые подразумевают собой какие-то абстрактные действия со стороны откликнувшихся.
Что значит "как сверстать мобильную версию"? Какие блоки менять?

Окей, попробую ответить на ряд вопросов..

Цитата(matador2011 @ 6.4.2016, 23:39) *
Подскажите как реализовать,

http://bootstrap-3.ru/

Цитата(matador2011 @ 6.4.2016, 23:39) *
как сверстать мобильную версию сайта,

Notepad++ | SublimeText 3 | Блокнот

Цитата(matador2011 @ 6.4.2016, 23:39) *
как меня блоки местами?

Media Queries
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
webhelper777
webhelper777
сообщение 11.4.2016, 21:17; Ответить: webhelper777
Сообщение #5


Новичок
*

Группа: User
Сообщений: 20
Регистрация: 9.4.2016
Поблагодарили: 0 раз
Репутация:   0  


для адаптивной верстки я использую rupture mixins под stylus, очень удобная вещь
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
matador2011
matador2011
Topic Starter сообщение 13.4.2016, 3:51; Ответить: matador2011
Сообщение #6


Участник
***

Группа: User
Сообщений: 165
Регистрация: 15.12.2011
Поблагодарили: 18 раз
Репутация:   4  


Такой вопрос, чтобы добится желаемого результата в версии для больших экранов, приходится делать шрифт 13-14рх, и норм смотрится, а для теоефона очень мелко, и чтобы норм смотрелось, приходится делать шрифт большоц, около 20-24 px... почему так?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
x64
x64
сообщение 13.4.2016, 8:13; Ответить: x64
Сообщение #7


F.A.L.L.O.U.T.
*******

Группа: Super Moderator
Сообщений: 3424
Регистрация: 30.6.2011
Из: Железнодорожный (Балашиха)
Поблагодарили: 2746 раз
Репутация:   289  


Цитата(matador2011 @ 13.4.2016, 2:51) *
для больших экранов ... шрифт 13-14рх
для теоефона ... около 20-24 px

Точек на дюйм у монитора и телефона разве одинаково?


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Geers
Geers
сообщение 13.4.2016, 11:05; Ответить: Geers
Сообщение #8


Старожил
******


Группа: Active User
Сообщений: 1231
Регистрация: 13.4.2011
Поблагодарили: 654 раза
Репутация:   95  


Цитата(matador2011 @ 13.4.2016, 3:51) *
Такой вопрос, чтобы добится желаемого результата в версии для больших экранов, приходится делать шрифт 13-14рх, и норм смотрится, а для теоефона очень мелко, и чтобы норм смотрелось, приходится делать шрифт большоц, около 20-24 px... почему так?

Для адапнивности надо использовать em а не px.
https://habrahabr.ru/post/42151/
http://htmlbook.ru/content/edinitsy-izmereniya
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
x64
x64
сообщение 13.4.2016, 11:37; Ответить: x64
Сообщение #9


F.A.L.L.O.U.T.
*******

Группа: Super Moderator
Сообщений: 3424
Регистрация: 30.6.2011
Из: Железнодорожный (Балашиха)
Поблагодарили: 2746 раз
Репутация:   289  


Geers, который зависит напрямую от px)
Увеличив в браузере размер шрифта в 2 раза, получим и увеличение всего в 2 раза (если честно в em всё делать). Но тут полезут другие проблемы, например, с тизерами-картинками, которые нужно сделать так, чтобы и при 16px шрифте нормально было, и при 12px смысловая часть не терялась, и в 26px вписывалось. Это одна из проблем, на самом деле, их больше гораздо, фоновые картинки чего стоят.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
matador2011
matador2011
Topic Starter сообщение 22.4.2016, 14:20; Ответить: matador2011
Сообщение #10


Участник
***

Группа: User
Сообщений: 165
Регистрация: 15.12.2011
Поблагодарили: 18 раз
Репутация:   4  


Так, еще назрел вопрос по поводу изменения положения блоков. Как сделать так чтобы блок переместился в другое место при просмотре с телефона? Я так понимаю можно через java, а можно еще проще сделать блоки для большого и для маленького и просто прятать их или наоборот показывать... а как нужно делать? Нужно не просто поменять местами, а например перенести блок.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Помогите выбрать программу
Помогите выбрать программу
11 impak 1334 11.12.2017, 13:11
автор: Mikki
Открытая тема (нет новых ответов) Помогите найти плагин на WP
Отзывы с профилей соц сетей
1 SEOMR 438 30.11.2017, 7:18
автор: Nell
Открытая тема (нет новых ответов) Оцените пожалуйста ptd7.ru
Оцените пожалуйста домен: ptd7.ru
1 kostetskij 926 29.11.2017, 17:28
автор: Vangan
Открытая тема (нет новых ответов) Помогите найти проблему
Долгий ответ сервера
6 maxim1249 686 29.11.2017, 17:27
автор: genjnat
Открытая тема (нет новых ответов) Помогите оценить новотник. Плиз
1 Alex-777 520 29.11.2017, 7:18
автор: grumdas


 



RSS Текстовая версия Сейчас: 14.12.2017, 7:06
Дизайн