Верстка, CSS, HTML, SVG

Адаптивный дизайн Майл тупит

Николай Протасов
Николай Протасов
5 605
Автор, ты вообще запутался. Адаптивный сайт это не только "резиновость". Адаптивность достигается медиа-запросами в css и meta name="viewport". Без этого сайт на маленьком смартфоне будет показываться мелко, текст читать без увеличения будет нельзя, а гугл продолжит делать замечания.

Размер экрана планшета в 2000 пикселей не означает что, там будет 2000 css-пикселей. Есть понятие pixel ratio, что-то вроде масштаба пикселей. Если у планшета pixel-ratio=2, а ширина экрана 2000 пикселей, то блок шириной 1000 пикселей будет во всю ширину экрана.
https://bjango.com/articles/min-device-pixel-ratio/

Тут много нюансов, вот глянь видео для начала https://vimeo.com/33180097
Костик Переверзев
Костик Переверзев
2 778
Лучший ответ
Николай Протасов Кажется немного понял. Он у меня адаптив, с медиазапросами, но для десктопов я посчитал оптимальным 980 пикселей, на ноуте в 1280 вполне не плохо смотрится, на работе на ЭЛТ мониторе как раз всё впритирочку. А тут меня сбили толку мобильные устройства с разрешениями выше 2000 пикселей ...увы, протестировать не на чем, пользовался плагином в опере, но картинка там не высокого разрешения становится ...вообщем надо смотреть непосредственно на таком высокоразрешающем устройстве. Благодарю, посмотрю видео.
Николай Протасов За видео спасибо, оно как раз по теме моего вопроса.
Именно лучше делать с разным разрешением и отдавать взависимости от разрешения.
ПК
Павел Киричков
53 869
Николай Протасов Тогда ведь и вес существенно возрастёт картинки (
Делать несколько картинок с разными разрешениями.
Серый Пиф Паф
Серый Пиф Паф
50 035
Вы лучше примеры посмотрите в сети про адаптивные img, есть шаблоны от flashmint на их примере поучитесь, как удобней делать резиново-адаптивныую вёрстку и это удобнее и посмотрите на сетку боотстрап в ней чётко указано для каких разрешений экрана и как должно выглядеть, работая на примере можно научится грамотной вёрстке
Юрий Лебедянцев
Юрий Лебедянцев
15 130
Николай Протасов Спасибо, почитаю, но сайт без движка, чисто на файлах, бутстап может работать с такими сайтами? Щас как раз всё адаптивно, но я просто не хочу загружать высокоточные картинки, т. к. на мобиле оно хоть и уменьшится, но вес то я думаю будет этой картинки неизменен?
адаптивный сайт - это несколько разных макетов под разные устройства. переключение макетов под разные разрешения происходит через медиазапросы. нахватаются верхушек и начинают себе и людям мозги пудрить.
Данияр Телепов
Данияр Телепов
9 409
Николай Протасов Частично согласен ...НО ...можно полностью десктопный подстроить под мобильный, он сорее будет не адаптивный, а адаптированный, этим и занимаюсь. Один макет у меня полностью перестраивается взависимости от экрана мобильного устройста. Раньше никогда не задумывался об этом, делал фиксированный десктоп до недавнего времени. Только с картинками в стопор и встал, но решил просто ограничиться макимальной шириной, думаю это не худшее решение.
Картинку в блок, и картинке 100%. А дальше блоку не давать высоту, т. к. при изменении ширины экрана будет меняться высота картинки. А можно дать высоту блоку, но с параметром overflow:hidden; Решений хватает
Андрей Боярский
Андрей Боярский
5 254

Похожие вопросы