Мозги плавятся, но не понимаю эти нелогичные Media Queries. Как сделать другой файл стилей для мобильных устройств, если их разрешение больше, чем у десктопов?
Все такие умные, аж жуть. Ну не верстальщик я, и вижу подсказать никто не желает. Придется найти верстальщика и пытать пивом, может сможет
Да любой код, например это пример Код (Text): <!DOCTYPE html> <html> <head> <style> body { background-color: tan; color: black; } /* On screens that are 992px wide or less, the background color is blue */ @media screen and (max-width: 992px) { body { background-color: blue; color: white; } } /* On screens that are 600px wide or less, the background color is olive */ @media screen and (max-width: 600px) { body { background-color: olive; color: white; } } </style> </head> <body> <h1>Resize the browser window to see the effect!</h1> <p>By default, the background color of the document is "tan". If the screen size is 992px or less, the color will change to "blue". If it is 600px or less, it will change to "olive".</p> </body> </html> Все прекрасно меняется, при исскуственной проверке, меняя размер окна браузера. Но для смартфона такие запросы бред, ибо разрешение экрана на смартфоне выше, чем на десктопе.
После работы с google drive api - блевать хочется при слове google, а теперь еще и хромом пользоваться? Нет, увольте. Вопрос был простой, как на смартфонах установить другой шрифт. Я понимаю, что большинство законодателей стандартов не дураки, а так, полудурки. Мне, как пользователю или разработчику должно быть глубоко плевать, какое разрешение у смартфона, если диагональ экрана 5.5". Я хочу, например, чтобы ровно в центре экрана была надпись "Hello, world!". И она одинаково смотрелась на Samsung J7 2016 года (HD) и на Samsung J7 2017 года (Full HD), ибо физические размеры у них одинаковые.
те же самые инструменты есть в опере и мазиле. можно добавить другие известные устройства либо свое разрешение и его отлаживать. не знаю какое там разрешение у твоих моделей но вот есть модель в отладчике такая вот тебе медиа разжеванный Код (CSS): /*Если ширина max 360px, т.е. до 360 px - шрифт для блока с классом .hello-world будет Roboto Condensed */ @media screen and(max-width:360px){ .hello-world{ font-family: RobotoCondensed } } Однако если повернуть устройсво в горизонтальный режим - ширина станет 740px и это тоже можно сделать так же /*Если ширина max 740px, т.е. до 740 px - шрифт для блока с классом .hello-world будет Roboto Condensed */ @media screen and(max-width:740px){ .hello-world{ font-family: RobotoCondensed } } ну или даже можно сделать так: /*Если ширина min360px и не больше max 740px т.е. между этих значений */ @media screen(min-width:360px) and(max-width:740px){ .hello-world{ font-family: RobotoCondensed } }
HTML: <meta name="viewport" content="width=device-width, initial-scale=1"> А второе волшебное слово: Flex В сочетании оно тебе даст надпись в центре экрана примерно одинакового размера Ибо идеалы увы недостижимы