Какое разрешение должно быть у мобильной версии сайта?

Question

[Александра Страхова]

Какое разрешение нужно делать для мобильной версии сайта шириной 320px?
Для декстопной версии разрешение делаю 72 точки. Если делать так же для мобильной версии, то весь контент получается очень сильно размазанный, и все очень плохо видно, но если делаю разрешение 300 dpi, качество становится лучше, но меняется размер всех элементов и верстальщику будет не понятно как верстать, т.к размеры будут уже не те.
Как быть? Что нужно сделать, чтобы макет мобильной версии был нормального качества, и при этом сохранялись нужные размеры?
Прикрепляю скрин, на нем разрешение 72 точки и все размыто

Answer 1

[Сергей delphinpro]

Всё большее кол-во современных телефонов оснащается retina-дисплеями. Т.е. дисплеями с повышенной плотностью пикселей. В таких устройствах css-пиксель отличается от физического. Для определения соотношения этих величин есть API https://developer.mozilla.org/ru/docs/Web/API/Wind...
Вот еще ссылка по теме https://habr.com/post/150071/

Если кратко ответить на вопрос, то рисовать следует в масштабе 1:1 (320 по ширине), но графические элементы делать размерами в 2-3 раза больше и помещать их в смарт-объекты (речь о фотошопе). Сам смарт-объект масштабируется до нужных размеров в макете. Потом верстальщик сможет достать из смарт-объекта оригинал картинки в высоком разрешении и грамотно разместить его на сайте. Картинки (img) размещаются либо через srcset, либо топорно, удвоенного размера исходник, и указание нужных размеров самой картинке в css. Фоны также пишутся либо отдельные через media device-pixel-ratio, либо удвоенного размера с указанием background-size.

Дополнительная информация по запросу в поисковике "как верстать по ретину"

Answer 2

[makol]

Доброго времени суток, думаю стоит посмотреть тут, тут, и тут

Answer 3

[Basitkhan Mansurov]

Бросай фотошоп и переходи на Figma.
Возможностей конечно меньше, но он как раз запилен под построение интерфейсов.
Не надо мучиться с размерами (там и так есть размеры), установишь на телефон Figma mirror и сразу тестишь на телефоне, это векторная графика, поэтому тебе не придётся работать с разрешением, просто отправляешь артбоарды в зеплин разраба, а потом он там уже е*ошит!)))