Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/4: Рейтинг темы: голосов - 4, средняя оценка - 5.00
vlad-55
12 / 12 / 4
Регистрация: 21.02.2009
Сообщений: 1,817
1

Точки слома адаптивного дизайна

21.11.2016, 19:48. Просмотров 717. Ответов 2
Метки нет (Все метки)

В нескольких статьях авторы пишут о том, что достаточно проводить адаптацию по ширине экрана 1025 и 760 пикселей.

С этих позиций я проверил свой сайт с резиновой версткой и обнаружил следующее.

Самая чувствительная область - это меню, которое при уменьшении размера экрана первым начинает разваливаться и это действительно некрасиво. Поэтому я исходил из того, что при уменьшении ширины меню не должно страдать. То есть, если ниже какой-то ширины меню расползается, то в этот момент нужно изменять дизайн.

Реально получилось так.

При сужении экрана с 1250 пикселей первая точка излома 800рх. При этой ширине трехколоночный дизайн превращается в двухколоночный, а правая колонка перемещается вниз.

Вторая точка 650 пикселей, при которой дизайн превращается в одноколоночный.

Яндекс и Гугл своими скриптами такую страницу одобрили, однако я предполагаю на ширине экрана менее 480 пикселей увеличить ширину строк меню до 48рх и сделать просветы между ними 10рх, чтобы было удобно кликать пальцем.

Нужно ли сделать что-то ещё?

И как-то меня смущают такие большие цифры – 800, 650 и 480.

Или это нормально?

(Размер шрифта минимальный - 12рх, так что играть уменьшением его размера уже не получится)
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
21.11.2016, 19:48
Ответы с готовыми решениями:

Поведение адаптивного дизайна
Вот песочница https://jsfiddle.net/o82kLqdn/1/ Там есть боди с размером 600рх,...

Создание адаптивного дизайна
Надо создать адаптивный дизайн, чтобы на широких экранах и на телефонах...

Вёрстка адаптивного меню
Всем привет. Ребята, подскажите пожалуйста, как сделать чтобы блок в котором...

Вёрстка адаптивного меню
Подскажите пожалуйста, как сделать адаптивное меню такого плана, как на...

Вёрстка адаптивного меню
Здравствуйте. Делаю (точнее, пытаюсь делать) адаптивный дизайн для сайта....

2
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2756 / 2317 / 1021
Регистрация: 15.12.2012
Сообщений: 8,592
Записей в блоге: 1
21.11.2016, 20:24 2
vlad-55, лучше бы задались вопросом: кто же пишет подобные статьи? Ей Богу Интернет большой, есть много мастеров, которые годами занимаются разработкой сайтов и лишь некоторые из них публикуют по настоящему толковые статьи, но почему-то никто их не видит в упор хоть их и не так много, как хотелось бы... Как правило авторы подобных блоков ставят перед собой задачу, как заработать деньги, а не дать фундаментальные знания его читателям... И как всегда выдают, какой-нибудь квадратный макет, который по сути и адаптировать не приходится и всё у них получается с первого раза, но это лишь видимость на самом деле, чтобы убеждать посетителей блога в своём мастерстве... Скажу так, в зависимости от структуры шаблона количество брекпойнтов может варьироваться... И чем сложнее макет и чем больше на нём различных деталей, тем сложнее его сделать адаптивным... Вам совет такой: для начала научитесь в принципе использовать брекпойнты, пусть их будет много, но если сайт будет смотреться - значит Вы уже достигли хороших результатов... С практикой, в дальнейшем, может Вы и будете использовать только две точки излома, но это приходит с опытом... Не старайтесь кому-то подражать и удачи в разработках!
1
t1m0n
625 / 403 / 27
Регистрация: 03.11.2009
Сообщений: 1,836
21.11.2016, 23:20 3
возьмите исходный код популярных фреймворков типа бустрапа и посмотрите точки переходов там
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
21.11.2016, 23:20

Верстка адаптивного сайта
Народ всем привет, нужна помощь. Верстаю сайтик с адаптивным дизайном через...

Создание адаптивного сайта
Делаю первый адаптивный сайт,но столкнулся с проблемой, при широкоформатном...

Выравнивание адаптивного блока
Подскажите, как можно выравнять адаптивный блок рекламы. <div...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru