Комментарии 53
А не подскажете, есть ли сейчас какой-то надежный способ отобразить картинку с маппингом пикселей в аппаратные 1:1?
сейчас и пиксели не абсолютныАвтор же описывает случай когда это не так. px игнорирует настройки шрифтов в браузере.
Если сайт создан с использованием размеров шрифтов, выраженных в единицах измерения px, то таким пользователям, для которых эти шрифты слишком мелки, даже если они и настроили удобный для себя размер шрифта, будет неудобно читать материалы сайта.
Насколько я понял, основная причина использования REM как раз в том, чтобы не фиксировать базовый размер шрифта в пикселях, потому что есть некие мифические пользователи, которые меняют размер шрифта, выставляя его в дебрях настроек браузера прямо в пикселях, а не кнопками зума. У вас, получается, таким пользователям всё равно будет плохо. Потом, если привязка к размеру окна, так это же vh/vw проще использовать. И ещё вопрос, а что если надо подключить сторонние компоненты? Не возникает ли проблем с ними?
По поводу пользователей со своими шрифтами, я честно говоря это не проверял, но думаю шрифт будет переопределён.
В плане удобства, то очень приятно верстать, можно делать почти как «в пикселях» не высчитывая vh/vw, просто делить пиксели на 10, но в то же время иметь адаптивный вариант вёрстки.
У нас есть «синтетический» размер шрифта. на 1440 ширины для десктопа и на 375 для мобилки это 10px. Если ширина уменьшается/увеличивается, то и уменьшается/увеличивается размер этого шрифта.Я правильно понял, что вверх от 375 шрифт увеличивается, а вниз от 1440 уменьшается — и таким образом где-то посередине должен быть резкий скачок?
Или имеется в виду в диапазоне от 375 до 1440 он равен константе 10px?
Базовый размер на 1440 10px и уменьшается при уменьшении размера, до 800 px где переключаемся на мобильный вид и там будет в районе 24px, уменьшаясь до 10px на 375 и дальше если ширина экрана будет сокращаться.
нет на 375 и 1440 базовый шрифт равен 10px
Например, классический Айпад 768x1024. В вертикальной ориентации я буду видеть раздутую в 2 с лишним раза мобильную верстку (зачем мне планшет, показывающий столько же информации, сколько и телефон?), а в горизонтальной — сильно скукоженную десктопную. В первом случае получается бабушкофон с огромными шрифтами, а ко второму наоборот надо лупу прикладывать.
Почему вы не используете 1rem = 1px ? Ведь тогда вы не будете ничего никогда делить ни на 10 ни на 16)
Где-то я это уже слышал. Пришло время попрощаться с милями, фунтами, баррелями, дюймами и прочими AM/PM.
Ну и отзывчивый дизайн в первую очередь идет из головы дизайнера. И явное указание конкретного размера шрифта и интерлиньяжа в зависимости от ширины экрана — намного более правильный вариант, нежели абсурдное «150% от текущего размера, а текущий размер зависит от ширины экрана»
Короче, хватит нести пургу.
Но вот для медиазапросов — явная глупость, во всяком случае до появления container queries.
Пиксели разные, но CSS пиксели стараются привязывать к угловому размеру же при типичном режиме использования, так что для телефонов ширина будет от 320 до 420 пикселей для любых dpi. В CSS вроде изначально физические юниты были честные, а потом их через dpi=96 жёстко привязали к пикселям, якобы для совместимости. В итоге получить реальные размеры невозможно без хардкода и попыток угадать модель устройства. Может быть, когда-то ситуация изменится. Для размера кнопок же на первый взгляд кажется, что хорошая идея использовать физические размеры, но представьте, что вы делаете презентацию сайта на экране на всю стену и там появляется эта кнопочка в 1.5 см. Тоже не очень как-то.
Ну, "отбирают" совсем не по этой причине. Я так понял W3C пыталась подстроиться под стандартные на тот момент 96dpi:
Note: This definition of the pixel unit and the physical units differs from previous versions of CSS. In particular, in previous versions of CSS the pixel unit and the physical units were not related by a fixed ratio: the physical units were always tied to their physical measurements while the pixel unit would vary to most closely match the reference pixel. (This change was made because too much existing content relies on the assumption of 96dpi, and breaking that assumption broke the content.)
Думаю, было бы правильно ввести уже настоящие физические единицы, дать в конце концов в браузеры API о физических параметрах дисплея устройства. А то странно, для геолокации и акселерометра уже есть поддержка, а физические размеры экрана узнать невозможно.
Кто это вам запрещает? В CSS можно использовать как единицы миллиметры, сантиметры и дюймы не только для печати.
При выводе на телек (или проектор) там явно будет DPI ниже чем на первичном мониторе, и масштабирование произойдёт естественным образом — как и с любой другой картинкой.
Если же речь про большие (типа рекламных) мониторов — то и сантиметры на них нужно мерять с учётом расстояния с которого на них будут смотреть, хотя в этом случае единицы типа vw/vh действительно могут оказаться гораздо удобнее.
Пользователи могут настраивать свои операционные системы или браузеры, устанавливая предпочитаемый ими размер шрифта, соответствующий их нуждам. Если им это нужно, то, настроив применение шрифта, размер которого крупнее стандартного
Ни разу не видел пользователя, который настраивает размер шрифта и тем более знает где эта настрйка находится. Обычно Ctrl + решает все проблемы. Намного проще и запоминается индивидуально под каждый сайт.
Просто скажем нет пикселям!
Я бы сказал так:
Везде пиксели! В блоках где рядом есть текст — em (т.е. в основном паддинги и межстрочные интервалы). Всё!
Когда везде тулят em/rem, особенно в медиа-запросы — поддержка ад.
А любителям программировать в стилях (циклы и ветвления в sass, сюда же calc в перемешку с троекратными переопределениями css-переменных по пути и т.д.) — отдельный котёл в аду.
Явное лучше неявного.
Современные браузеры могут рендерить элементы, измеряемые в сотых долях пикселя.
До чего техника дошла… пиксель, оказывается, можно разделить как минимум на десятки частей, и при этом каждая может независимо отображаться.
А на самом деле, адаптивный UI еще можно написать, но когда в результатах работы нужно получить текстовый документ, готовый к печати, да еще и по ГОСТу, то как без абсолютных единиц-то?
Да даже для показа картинок, логичнее всего использовать ресайзинг с абсолютным ограничением по ширине и/или высоте.
И причем тут слоганы?
Я пока что не заказывал футболки
.post__text {
font-size: 16px;
}
Статья ни о чем.
Есть сочетания ctrl+- для изменения размера на странице. Без всякой привязки к базовому размеру — отлично работает. Текст точно так же масштабируется.
Были проекты и с px и с rem. Хрен редьки не слаще, но с px проще брать значения с макета не преобразовывая.
Если что-то и умрёт, то первым точно будут не пиксели а ремы.
Пришло время попрощаться с единицей измерения px