За последние 24 часа нас посетили 8853 программиста и 613 роботов. Сейчас ищут 195 программистов ...

Отдельный файл css для смартфонов и планшетов.

Тема в разделе "HTML и CSS", создана пользователем savsoft, 21 окт 2019.

  1. savsoft

    savsoft Новичок

    С нами с:
    1 фев 2017
    Сообщения:
    69
    Симпатии:
    2
    Мозги плавятся, но не понимаю эти нелогичные Media Queries.
    Как сделать другой файл стилей для мобильных устройств, если их разрешение больше, чем у десктопов?
     
  2. Dimon2x

    Dimon2x Старожил

    С нами с:
    26 фев 2012
    Сообщения:
    2.007
    Симпатии:
    154
    Чо там не понимать? Если я понял, то любой поймёт
     
    [vs] и Dron-Boy нравится это.
  3. Dron-Boy

    Dron-Boy Старожил

    С нами с:
    20 ноя 2014
    Сообщения:
    1.015
    Симпатии:
    125
    Димон, лучший ответ)
     
  4. rewuxiin

    rewuxiin Активный пользователь

    С нами с:
    17 апр 2012
    Сообщения:
    594
    Симпатии:
    85
    ага, это конечно же проще сделать, чем понять медиа запросы
     
  5. savsoft

    savsoft Новичок

    С нами с:
    1 фев 2017
    Сообщения:
    69
    Симпатии:
    2
    Все такие умные, аж жуть. Ну не верстальщик я, и вижу подсказать никто не желает. Придется найти верстальщика и пытать пивом, может сможет ;)
     
  6. Dimon2x

    Dimon2x Старожил

    С нами с:
    26 фев 2012
    Сообщения:
    2.007
    Симпатии:
    154
    @savsoft ты бы лучше показал код, который не понимаешь.
     
  7. savsoft

    savsoft Новичок

    С нами с:
    1 фев 2017
    Сообщения:
    69
    Симпатии:
    2
    Да любой код, например это пример

    Код (Text):
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <style>
    5. body {
    6.   background-color: tan;
    7.   color: black;
    8. }
    9.  
    10. /* On screens that are 992px wide or less, the background color is blue */
    11. @media screen and (max-width: 992px) {
    12.   body {
    13.     background-color: blue;
    14.     color: white;
    15.   }
    16. }
    17.  
    18. /* On screens that are 600px wide or less, the background color is olive */
    19. @media screen and (max-width: 600px) {
    20.   body {
    21.     background-color: olive;
    22.     color: white;
    23.   }
    24. }
    25. </style>
    26. </head>
    27. <body>
    28.  
    29. <h1>Resize the browser window to see the effect!</h1>
    30. <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>
    31.  
    32. </body>
    33. </html>
    Все прекрасно меняется, при исскуственной проверке, меняя размер окна браузера. Но для смартфона такие запросы бред, ибо разрешение экрана на смартфоне выше, чем на десктопе.
     
  8. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    1.575
    Симпатии:
    257
    @savsoft в хроме есть все для тестов.

    ывфвфывыфый.png
     
  9. savsoft

    savsoft Новичок

    С нами с:
    1 фев 2017
    Сообщения:
    69
    Симпатии:
    2
    После работы с google drive api - блевать хочется при слове google, а теперь еще и хромом пользоваться? Нет, увольте. Вопрос был простой, как на смартфонах установить другой шрифт. Я понимаю, что большинство законодателей стандартов не дураки, а так, полудурки. Мне, как пользователю или разработчику должно быть глубоко плевать, какое разрешение у смартфона, если диагональ экрана 5.5". Я хочу, например, чтобы ровно в центре экрана была надпись "Hello, world!". И она одинаково смотрелась на Samsung J7 2016 года (HD) и на Samsung J7 2017 года (Full HD), ибо физические размеры у них одинаковые.
     
  10. rewuxiin

    rewuxiin Активный пользователь

    С нами с:
    17 апр 2012
    Сообщения:
    594
    Симпатии:
    85
    те же самые инструменты есть в опере и мазиле.
    можно добавить другие известные устройства либо свое разрешение и его отлаживать.

    не знаю какое там разрешение у твоих моделей но вот есть модель в отладчике такая

    Снимок.JPG

    вот тебе медиа разжеванный

    Код (CSS):
    1. /*Если ширина max 360px, т.е.  до 360 px - шрифт для блока с классом .hello-world будет Roboto Condensed */
    2. @media screen and(max-width:360px){
    3. .hello-world{
    4.    font-family: RobotoCondensed
    5. }
    6. }
    7.  
    8. Однако если повернуть устройсво в горизонтальный режим - ширина станет 740px и это тоже можно сделать так же
    9.  
    10. /*Если ширина max 740px, т.е.  до 740 px - шрифт для блока с классом .hello-world будет Roboto Condensed */
    11. @media screen and(max-width:740px){
    12. .hello-world{
    13.    font-family: RobotoCondensed
    14. }
    15. }
    16.  
    17. ну или даже можно сделать так:
    18.  
    19.  
    20. /*Если ширина min360px и не больше max 740px т.е. между этих значений */
    21. @media screen(min-width:360px) and(max-width:740px){
    22. .hello-world{
    23.    font-family: RobotoCondensed
    24. }
    25. }
     
    savsoft нравится это.
  11. Roman __construct

    [ БАН ]

    С нами с:
    27 апр 2019
    Сообщения:
    1.277
    Симпатии:
    113
    HTML:
    1.   <meta name="viewport" content="width=device-width, initial-scale=1">
    А второе волшебное слово:

    Flex

    В сочетании оно тебе даст надпись в центре экрана примерно одинакового размера

    Ибо идеалы увы недостижимы :)
     
    savsoft нравится это.
  12. savsoft

    savsoft Новичок

    С нами с:
    1 фев 2017
    Сообщения:
    69
    Симпатии:
    2
    Теперь понятно, все дело в DPR.
    Всем спасибо.
     
    Roman __construct нравится это.
  13. Roman __construct

    [ БАН ]

    С нами с:
    27 апр 2019
    Сообщения:
    1.277
    Симпатии:
    113
    типа того :)