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



 

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

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


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


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


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


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


Цитата(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


--------------------
🗹 Быстрый и надежный хостинг от 135 рублей
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
webhelper777
webhelper777
сообщение 11.4.2016, 21:17; Ответить: webhelper777
Сообщение #5


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


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


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

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


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


Цитата(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


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


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


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПомогите подобрать HTML редактор
19 Serapion 495 25.2.2021, 8:34
автор: PostBrigada
Открытая тема (нет новых ответов) Оцените пожалуйста логотип
для сайта фотобудки
15 KM_ 3131 6.2.2021, 22:54
автор: 0pium
Открытая тема (нет новых ответов) Годный дизайн с последующей версткой
5 pronlex 2066 30.1.2021, 15:58
автор: BigPrivate
Открытая тема (нет новых ответов) Помогите рещить проблему с монитором.
Почему низкое разрешение при подключении монитора через displayport?
0 Levels 390 11.12.2020, 0:48
автор: Levels
Открытая тема (нет новых ответов) Помогите с сайтом
10 Роман_01 14959 3.9.2020, 12:15
автор: Sosedus


 



RSS Текстовая версия Сейчас: 27.2.2021, 1:50
Дизайн