Релизуют ли лучшие собаководы в наше время вёрстку под мобильный и десктопный браузер одной и той же парой CSS + HTML файлов или всё ещё это отдельные вёрстки?

Как умеют, так и ваяют.

Да, может. Достаточно.

Причём тут собаки?

Причём тут собаки?

Это из старой рекламы. «Педигри. Рекомендации лучших собаководов». Стало крылатым выражением.

ещё пока недостаточно возможностей в CSS

Их давно уже достаточно, чтобы это была боль и ад, и чтобы любые правки после релиза наносили максимальный дамаг верстке. В теории это @media, на практике это «пиксельная верстка» и css в лучших традициях многострочника на перле.

реально продвинутые чуваки в индустрии, шарящие в последних нововведениях W3C и всей этой херни

Это не про меня, просто сижу в одной камеодном кабинете с главным верстальщиком.

Да. Есть мобильники, планшеты, десктопы и агромные мониторы. Для этого используются фреймворки, например bootstrap. А еще ты запостил не в тот раздел, благородные доны-девелоперы сейчас поморщат нос на «вебню».

многомтрочника на перле

Поэтому есть scss

Да, может. Достаточно.

В смысле? Страницу сервер вообще то отдает.

Как это он будет переобуваться? Каждый раз новый код отдается. CSS остается неизменным, но опять же, при чем тут «на лету»? После загрузки HTML клиент запрашивает CSS.

Или по что это вообще?

Чтобы не делать 2-3 верстки, придумали адаптивную верстку

Подписался на тред

в стандарте всё красиво. и делаешь всё красиво и всё работает у 99% пользователей. потом приходит 1% «не таких как все» и хлоп! у тебя вместо красивой css в писят строк полотнянка, на три четверти состоящая из пиксельхантинга и костыликов.

А что вызывает у тебя проблемы?

Вот в CSS есть всякие там @media штуки и прочие условные операторы. Или их всё равно не хватает,

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

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

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

Ага. А потом на смартфоне пытаешься попасть пальцем в крохотное меню (ведь 1920 ширина), а на десктопе меню пропадает под ткни-пальцем кнопку, потому что разработчик решил, что мониторов на 800 уже не бывает.

потому что разработчик решил, что мониторов на 800 уже не бывает.

Ну мониторов с шириной 800px, действительно, мало. В крайнем случае, можно сделать переход при ширине 720px.

А потом на смартфоне пытаешься попасть пальцем в крохотное меню (ведь 1920 ширина)

Меню на смартфоне не должно быть крохотным. Оно должно просто сворачиваться и открываться при нажатии на кнопку в верхнем углу. В принципе, стилизовать можно как угодно...

купи нормальный монитор, чего ты не каг все.

Возьми https://getbootstrap.com/ да посмотри. Все исходники есть вместе с документацией.

реально продвинутые чуваки в индустри

Ты форумом ошибся.

В css можно сделать чтобы страничка переобувалась по факту изменения размера окна браузера например.

Оно должно просто сворачиваться и открываться при нажатии на кнопку в верхнем углу.

Это понятно. Только по ширине сайт думает, что это полный монитор. Потому что ширина окна браузера за 1600. И приходится браузеру писать не реальную ширину, а выдуманную для CSS. А если

И планшет должен получать мобильную версию (мышки-то у него нет), но по ширине разделить невозможно. И если генерируешь битмап под ширину экрана, то приходится учитывать, что надо ещё умножать на -webkit-min-device-pixel-ratio.

Была же нормальная идея с handheld. Но как всегда, сначала из-за совместимости реализуем пачку костылей, а потом будем с ними отважно бороться. То имя файла в линукс на 255 байт ограничат, то в Си запретят завязываться на формат хранения отрицательных целых, то теперь любой сотовый должен рапортовать не реальный размер в пикселях, а не более 600.

Вот в CSS есть всякие там @media штуки и прочие условные операторы. Или их всё равно не хватает, чтобы один и тот же HTML + CSS файлик без изменений реализовывал 2 разные вёрстки под смартфон и десктоп?

Гугл настойчиво рекомендует делать один сайт с разными css: https://developers.google.com/search/mobile-sites/mobile-seo/

Отдельные верстки уже давно ушли в прошлое, все не читал, но сейчас достаточно техник и инструметов реализовать все в одном файле.

Не забывает про DOM/JS примочки плюс Resposive

Сейчас с фронт-эндом можно творить чудеся если посмотреть то как можно применять те же новые фреймворки js.

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

А не как многие даже сейчас клипают сайта, проекты, смотриш в сурс, ориджинал, а там что под моб 800 кб влетает что в десктоп )

Я обратно активизировался, не к добру это :D

что значит «переобувалась»?

теперь любой сотовый должен рапортовать не реальный размер в пикселях, а не более 600.

Это не «теперь», а всегда так было - CSS-пиксель никогда не был равен экранному пикселю. И телефоны тут не причём - на современных модных 13-дюймовых нетбуках с 4K-экранами тоже применяются стили для ширины какой-нибудь условно 1280px. И это правильно, потому что если тебе нужно сделать кнопку, в которую человек должен тыкать пальцем на телефоне, ты делаешь её в 60 пикселей высотой, и она будет выглядеть одинаково на всех телефонах и с разрешением 480х800, и с 2560х1600, и тоже самое касается десктопов, сайты на стандартных квадратах с 90пикс/дюйм имеют такие же масштабы, как и на ультра-вайд 8К-мониторах.

если например взглянуть на цепочку проектирования, то как правило такое в тз сложно изобразить одним макетом, особенно в пикселях

Смартфоны учитывают dpi. С точки зрения стилей на смартфоне никаких 1920 не будет.

И это правильно, потому что если тебе нужно сделать кнопку, в которую человек должен тыкать пальцем на телефоне, ты делаешь её в 60 пикселей высотой

Ещё в CSS1 было для этого pt. А вот когда на @media max-width вешаешь кнопку действительно 60 пикселей, то на сотовом она выглядит ужасно, особенно если там есть буквы, так как каждый пиксель растягивается в 3-4 раза. Поэтому приходится или ставить иконку на 512 с CSS на 60 (пусть масштабирует, а ещё лучше сразу SVG — байты экономить не надо, процессоров у сотовых много...) или все картинки расписывать на каждое масштабирование (например, для dpi 4 и размера 60 нужна картинка 240x240, тогда останется неиспорченной).

В этом и беда. Если сделать сайт оптимизированным под ширину в 360 пикселей, как заявляет браузер, то пользователь и получит 360 квадратиков по горизонтали вместо 1440 пикселей возможных на экране. Приходится городить костыли.

Он наверное имел ввиду, под разные разрешения - подключать разные css стили.

В этом и беда. Если сделать сайт оптимизированным под ширину в 360 пикселей, как заявляет браузер, то пользователь и получит 360 квадратиков по горизонтали вместо 1440 пикселей возможных на экране.

Вот это вот кстати вообще интуитивно непонятно. Когда размер экрана телефона 1080х1920, а физический размер совершенно другой.

Когда размер экрана телефона 1080х1920, а физический размер совершенно другой.

Причём это не только телефоны. Из-за криворуких дизайнеров, не умеющих читать документацию, даже в десктопные браузеры напихали костылей и браузерный пиксель является какой-то абстрактной единицей между pt и реальным пикселом.

Ответ на сообщение:

Эра клуба закончилась?

Скорее ЛОРа.

#t15009431

Не разрешения а ширину. @media max-width min-width

body {
  background: white;    
}

@media screen and (min-width: 980px) /* Desktop */ {
  body {
    background: red;
  }
}

@media screen  and (max-width: 979px) /* Tablet */ {
  body {
    background: blue;
  }
}

@media screen and (max-width: 500px) /* Mobile */ {
  body {
    background: green;
  }
}

Еще про это почитай:

https://tuhub.ru/posts/css-grid-complete-guide

Но, это путь самурая. Типовое решение: vue + vuetify.

А я напомню:

https://motherfuckingwebsite.com/

It’s responsive
You dumbass. You thought you needed media queries to be responsive, but no. Responsive means that it responds to whatever motherfucking screensize it’s viewed on. This site doesn’t care if you’re on an iMac or a motherfucking Tamagotchi.

не актуально выхлоп ангуляра весит три мегабайта… что там какие-то 100kb jquery. сейчас веб-сайты сотни мегабайт оперативы выжирают и процессор нагружают

не актуально выхлоп ангуляра весит три мегабайта… что там какие-то 100kb jquery. сейчас веб-сайты сотни мегабайт оперативы выжирают и процессор нагружают

То, что так делают все, не значит что это хорошо.

@media screen and (max-width: 979px) /* Tablet */ {

не срабатывает на Galaxy Tab, Nexus 9, Kindle Fire HD 8.9", iPad Pro 10.5", iPad Pro 12.9". Получается примерно в половине случаев.

Желательно ещё и по высоте ориентировать, что бы пропорции сохранялись.

Ты бы еще вспомнил про даунов, что сидят с IE Explorer

Ну да: «это не я криворукий, это пользователи неправильную ОС/железо выбрали». Где-то я уже это слышал. Вроде как обоснование от Gnumeric, почему они не осилили Windows (GTK оказалась недостаточно портабельной).

А по стандарту по User-Agent определять Mobile/Android уже мозгов не хватает?

За определение по юзер-агенту по морде бьют.

width=device-width и поехали. Если у кого-то и это не работает, пусть сдают свою рухлядь производителю.

За определение по юзер-агенту по морде бьют.

О! Может ты знаешь, чем лучше гадание о наличии мышки по ширине экрана по сравнению с нормальным определением по юзер-агенту? Кроме хипстерского «это не модно, потому что в CSS такое условие не написать»?

Кстати, а почему max-width, а не max-device-width? Чтобы портить сайты в тайловом оконном менеджере или даже просто при неполноэкранном браузере?

тебе написали, что это проблемы утырков, что с них сидят. на второй вопрос ответ пттому что так принято. ты у себя что угодно делай.

В стимбраузере пустой экран кажет, хотя лор работает.

Ты упоролся? @media реагирует на вьюпорт, а не размер экрана. Как раз это сделает тебе в тайлинге хорошо. Если, конечно, автор стиля обладал мозгом.

Задание viewport с width=device-width говорит недодевайсам мобильным устройствам «всё хорошо, прекрасная маркиза, не нужно притворяться, что у тебя экран с 980 пикселей в ширину, мы обо всём позаботились».

Потому что max-device-width никому не упёрся ¯\_(ツ)_/¯

Ты упоролся? @media реагирует на вьюпорт, а не размер экрана. Как раз это сделает тебе в тайлинге хорошо. Если, конечно, автор стиля обладал мозгом.

В смысле? В тайлинге ширина вьюпорта станет меньше 979 и пользователь получит вместо нормальной страницы недосайт для тыканья пальцем.

Если автор стиля написал

@media screen  and (max-width: 979px) /* Tablet */ {
 ...
}

Или что он должен написать, если обладает мозгом?

Задание viewport с width=device-width говорит недодевайсам мобильным устройствам «всё хорошо, прекрасная маркиза, не нужно притворяться, что у тебя экран с 980 пикселей в ширину, мы обо всём позаботились».

Это всего лишь не даёт сайту расползаться за края мобильного экрана. Реальное число пикселей в width от этого не появляется.

Потому что max-device-width никому не упёрся

Многозадачность кончилась вместе с Windows NT? Теперь снова предполагается, что у пользователя не больше одной программы и она запущена всегда на весь экран?