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
*******

Группа: Super Moderator
Сообщений: 3817
Регистрация: 23.3.2011
Поблагодарили: 4171 раз
Репутация:   371  


Цитата(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
Сообщений: 3544
Регистрация: 30.6.2011
Из: Железнодорожный (Балашиха)
Поблагодарили: 2881 раз
Репутация:   294  


Цитата(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
Сообщений: 3544
Регистрация: 30.6.2011
Из: Железнодорожный (Балашиха)
Поблагодарили: 2881 раз
Репутация:   294  


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыОцените первую работу пожалуйста
56 Findes 10890 Вчера, 17:13
автор: Vlad_Sokolov
Горячая тема (нет новых ответов) Помогите, пожалуйста, моей дочери выжить!
благотворительный топик
30 vitvirtual 3785 19.5.2018, 8:30
автор: vitvirtual
Открытая тема (нет новых ответов) Продвигаю страницу по запросу "Как сделать игру". Помогите советом, пожалуйста
Я секу в теме! Но подать статью угодным поисковикам образом не смо
22 coremission 2186 8.5.2018, 12:33
автор: coremission
Открытая тема (нет новых ответов) Помогите с выбором ноута
20 rokot 902 23.4.2018, 12:09
автор: Room
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыПомогите с идеями для форума про успех
Спасибо за каждую идею
43 Zoya83 5164 12.4.2018, 11:42
автор: Zoya83


 



RSS Текстовая версия Сейчас: 24.5.2018, 20:21
Дизайн