Какая разница между CSS-размерами и физическими размерами экрана?

Question

[skovaleva]

Недавно пришло осознание того, что есть физические и CSS-размеры экрана, и что дизайнер, отрисовывая сайт под минимальные размеры экранов (мобильные телефоны — 320px, планшеты — 768px), ориентируется именно на CSS-размеры.
- Что такое физические и CSS-размеры? В чем отличия? И как их понять дизайнеру?
- Почему верстальщику проще "растянуть" макет под большую ширину? И что значит "растягивание"?
Например, дизайнер создает макет для мобильной версии, шириной 320, но открываться сайт уже будет на разных физических разрешениях (например, у Iphone 6SE - 1920 px). При растягивании не происходит пикселизация и размытия?
- Если CSS-размеры нам нужны для отрисовки макета, для чего нам нужны знания о физических разрешениях? Для подбора качественных изображений?

Answer 1

[Максим Тимофеев]

Что такое физические и CSS-размеры?

CSS-размеры - это плод Вашего воображения, есть разные единицы, которые можно использовать при верстке. Они сильно отличаются: читать
физические размеры тоже не совсем верная формулировка. Я так понимаю речь о том, что пользователь имеет размер дисплея в см, при этом расширение экрана может быть совершенно разное при одинаковых размерах в см.
Допустим мониторы c разрешением fullHD (1920х1080), при этом на экране 22'' и на экране 32'' размер блока в см будет в реальности разный (измеряя линейкой), при том что в px или в % он одинаковый. Связывающее звено, это плотность пикселей ppi: читать

Почему верстальщику проще "растянуть" макет под большую ширину?

Тот же вопрос. А почему?

ПС: Если Вы ищите идеальное решение - его нет. Дизайнеру и верстальщику надо знать и понимать как себя ведет графика на разных диагоналях дисплея при одинаковых расширениях. Надо понять что такое пиксель, что такое сантиметр, что такое соотношение сторон и т.д. Это целая наука, тут одной фразой не опишешь. Надо много чего прочитать на эту тему. Я считаю, что web-дизайнер, обязательно должен немного знать html и css. Это как бы отдельная профессия и отдельный специфический набор знаний. Тут "умею рисовать в фотошопе" слишком мало. Как и для дизайна визиток или буклетов, надо понимать, что такое СMYK, что такое цветоделение, какие типы печати бывают, какие типы бумаги и т.д.
Самый простой способ все это понять и освоить - больше общаться с верстальщиком, при чем желательно с хорошим. У меня жена дизайном занимается, пока не научил css и html получал го..но psd. Потому что надо понимать, что можно сделать, что просто, что сложнее, что будет динамическим, что фиксированным. Очень много нюансов.

Comments

[wiyod]

Божей мой, сколько напыщенности, а на выходе пустое место. Какие сантиметры? Какие дюймы? Вопрос четко стоит - CSS размеры (да, именно CSS размеры в пикселях, все правильно написано), и разрешения экранов. И вот тут уже плотность пикселей.

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

[Монти Пайтон]

wiyod, в CSS вроде есть такая величина как cm)) можно кажется написать padding: 2cm; что это имеется ввиду даст?

[Максим Тимофеев]

wiyod,

да, именно CSS размеры в пикселях

да будет Вам известно, что кроме пикселей в css можно использовать еще in, mm, vh, vw, vmin, vmax и еще вагончик

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

Стараюсь, постоянно разбираюсь, читаю много. Спасибо за предложение. С удовольствием прочитаю Ваш идеальный ответ, что бы подтянуть свой скил. Особенно это интересно от автора вопроса "Как анимировать height?"

[GreatRash]

wiyod, действительно, чувак, у тебя слишком много напыщенности.

[Максим Тимофеев]

GreatRash, не смог расшифровать "напыщенность". Возможно. Но я не понимаю, что это такое и как это относится к качеству ответа. Местами указывают как синоним "высокопарность", но не понимаю что в этом плохого?

[wiyod]

Максим Тимофеев, это не плохо, когда за этим что-то стоит (успехи, достижения, уникальные знания). А в данном случае ты не можешь чуваку объяснить ЭЛЕМЕНТАРНУЮ вещь в 3 строчки и начинаешь писать какой-то пространный текст как все сложно и как ты долго к этому шел. К чему шел? Раз объяснить не можешь))) Там реально объяснение в два предложения))

[Максим Тимофеев]

wiyod, Ну так что ж Вы не объясните? Я ж писал:

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

Я всегда слушаю оппонента, если ему есть что сказать. "это све фигня я лучше умею" - это не аргумент. Давайте Ваши идеальные 3 строчки ответа и мы все, включая меня поаплодируем Вам лайком.

И расшифруйте пожалуйста "успехи, достижения, уникальные знания".
Я считаю себя достаточно успешным.
Достижения? Что считать достижением? У меня неплохой рейтинг тут (на тостере), есть 1,5k подписчиков на профильном канале в ютуб. Постоянные клиенты из разных стран, свой бизнес. Это считается достижением? Крепкая семья, умный, воспитанный ребенок? Или это мелко?
Уникальные знания - вот тут совсем не понял. Какие такие уникальные? Секретные методы в php? Дата конца света? О чем Вы?

[Astrohas]

это не плохо, когда за этим что-то стоит (успехи, достижения, уникальные знания). А в данном случае ты не можешь чуваку объяснить ЭЛЕМЕНТАРНУЮ вещь в 3 строчки и начинаешь писать какой-то пространный текст как все сложно и как ты долго к этому шел. К чему шел? Раз объяснить не можешь))) Там реально объяснение в два предложения))

жду твоего ответа в 3 строки

[wiyod]

Astrohas, я насчитал минимум 6 вопросов - на какой из них вам нужен ответ?

[Максим Тимофеев]

wiyod, Надо выбрать только один? Ок, тогда все просят "Вашего ответа в 3 строки", присоединюсь. Остальные это лирика.

[Монти Пайтон]

wiyod, тоже жду вашего ответа 3 строчки

[dom1n1k]

Слова "физические размеры" - из моего ответа к предыдущему вопросу автора:
https://toster.ru/answer?answer_id=1181203#answers...
Подразумевались, конечно, не сантиметры, а физические пиксели матрицы - в противоположность логическим пикселям виртуального холста, куда рендерится страница.

[dom1n1k]

И просто не могу удержаться:

Как и для дизайна визиток или буклетов, надо понимать, что такое SMYC, что такое цветоделение, какие типы печати бывают, какие типы бумаги и т.д.

SMYC?

[GreatRash]

Максим Тимофеев, я не вам отвечал.

[Монти Пайтон]

dom1n1k, когда вижу длинные ответы даже не читаю их, как вам удаётся, вы вчитываетесь или бегло просматриваете тексты, потому что мне было бы лень, вы что полностью прочитали его ответ?

[Максим Тимофеев]

GreatRash, сорри, не обратил внимание в пылу диалога

[Максим Тимофеев]

dom1n1k,

SMYC?

спасибо, исправил, конечно же SMYK имелся в виду

[dom1n1k]

конечно же SMYK имелся в виду

Опять мимо.

Ostin1, читал до постскриптума, дальше понял, что можно пропустить.

[Максим Тимофеев]

dom1n1k, ))) исправил

[Монти Пайтон]

dom1n1k,

Ostin1, читал до постскриптума, дальше понял, что можно пропустить.

аахахахахахаах

Answer 2

[zooks]

Почитайте про адаптивную верстку и вьюпорты.

Answer 3

[xmoonlight]

https://www.sven.de/dpi/