Jump to content
  • Sign Up

Recommended Posts

День добрый. С помощью видео курса осваиваю медиа запросы - адаптация под мобильную версию только на CSS, навигация HTML.
Проблема следующая - адаптация работает когда я открываю сайт в окне и на своей операционной системе самостоятельно меняю размер окна, но при этом не работает в режиме разработчика, когда я выбираю просмотр с устройства, в моём случае это был iPad, и при этом автор в видео курсе демонстрирует работу медиа запросов именно там. Я попробовал перенести веб-страницу на свой телефон и открыть её в браузере - адаптивная версия там тоже не сработала. Видео за январь 2020, у автора Chrome - у меня тоже, разве что у него Mac, у меня Windows. Что это за магия такая и в чём заключается проблема?

Медиа запрос, который использовал автор видео и он работал в режиме разработчика, эмуляции просмотра с iPad

@media screen and (max-width: 800px) {
    nav ul {
        position: fixed;
        right: 0;
        top: 0;
        width: 100%;
        height: 100vh;
    }
}

 

 

Share this post


Link to post
Share on other sites

Попробуйте сделать тестовый элемент. И к нему любой медиа-запрос присвоить. 
Например цвет сменить. 

Возможно проблема в другом. 
В остальном, обычный media. Всё должно работать. 

Я кстати пишу без screen, сразу @media(max-width ...

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Similar Content

    • By StOK
      Здравствуйте! Может кто подскажет, как решить проблему...
      Пока не умею верстать шаблоны для Вордпресса, поэтому использую бесплатный. В шаблоне есть контрольная панель, в которой задаются настройки. Я его использовала несколько лет. Сейчас по стандартам Гугла нужно устанавливать адаптивные темы на сайты. Шаблон, который я использую, обновился и у него теперь в стилях прописаны медазапросы. Я удалила старую версию и установила новую. Медиазапросы не активируются. Сервис проверки от Гугла пишет, что шаблон не адаптирован, а на мобильном видно, что обрезается часть контента и половина каждой картинки. На планшете сайдбар налезает на контент. Я создала новый тестировочный сайт, установила новую версию Ворпресса и загрузила ту же тему с медиазапросами. На тестировочном сайте медиазапросы активируются и сайт корректно отображается на мобильных устройствах. И сервис от Гугла признает его за оптимизированный под мобильные. Я попыталась понять, в чем причина того, что не активируются медиазапросы на основном сайте и не нашла ошибки. Специально перед удалением темы сбросила настройки в контрольной панели, обновила Ворпресс до новой версии и загрузила ту же тему с медиазапросами. Но медиазапросы не активируются. Может у кого была подобная проблема? Или кто-нибудь из вас, уважаемые форумчане знает, где могут сохраняться настройки старой темы. Имеется в виду, в какой папке на хостинге могут оставаться настройки старого шаблона, если он полностью удален с сайта.
    • By sarnjak
      здравствуйте.
       
      вот сайт: http://sarnjak.myjino.ru/
       
      есть 3 стиля - загружаются с помощью медиазапросов в зависимости от ширины экрана:
      >1700 px
      >1300 px
      >0 px

      у меня на всех устройствах (PC, ноутбук, планшет на Android) открывается корректно - но эмуляторы по разному отображают, поэтому уверенности нет

      вот как должно быть/как отображается у меня:
      https://www.dropbox.com/sh/4u6n6d4ir2lamf6/r_fmUyn-w5
  • Member Statistics

    46,895
    Total Members
    1,451
    Most Online
    Neovo
    Newest Member
    Neovo
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Привет! Меня зовут Евгения и я ищу талантливых программистов в компанию DevCube. https://mydevcube.com/ Это международная компания, которая занимается DevOps, web и software разработками. На данный момент в команду требуются Full stack .NET (Junior & Senior) — 3+ year of commercial experience; — Strong knowledge of Angular 5+; — Strong knowledge of Typescript; — Experience with HTML/HTML5, CSS/CSS3, SCSS; — Good understanding of Git; — Conversational English. Будет плюсом: VB experience Условия: Удаленная работа full-time Зарплата от 10-20$/час по результатам собеседования. Обязательное условие - быть на связи до 21-22:00 по Москве. Для отклика прошу писать на почту: evgeniia.ko@mydevcube.com
    • Привет! Меня зовут Евгения и я ищу талантливых программистов в компанию DevCube. https://mydevcube.com/ Это международная компания, которая занимается DevOps, web и software development. На данный момент в команду требуются PHP developers (Junior & Senior) Requirements: — 3+ year of commercial experience; — Strong knowledge PHP 7+ — Framework knowledge — Conversational English — CSS, Json, HTML5 Будет плюсом: Shopify implementation expertise. Условия: Удаленная работа full-time Зарплата от 10-20$/час по результатам собеседования. Обязательное условие - быть на связи до 21-22:00 по Москве. Для отклика прошу писать на почту: evgeniia.ko@mydevcube.com
    • Подскажите пожалуйста, как позиционировать элемент на всю видимую область окна браузера? Есть слайдер, в котором крутятся картинки, и есть скрипт, благодаря которому картинка увеличивается, но не могу понять относительно какого элемента он позиционируется. <div class="sl_slider"> <div class="sl_img"> <img class="image" src="img/001-1.jpg" alt="001-1"> </div> <div class="sl_img"> <img class="image" src="img/002-2.jpg" alt="002-2.jpg"> </div> <div class="sl_img"> <img class="image" src="img/001-1.jpg" alt="001-1"> </div> <div class="sl_img"> <img class="image" src="img/002-2.jpg" alt="002-2.jpg"> </div> <div class="sl_img"> <img class="image" src="img/001-1.jpg" alt="001-1"> </div> <div class="sl_img"> <img class="image" src="img/002-2.jpg" alt="002-2.jpg"> </div> </div> .popup { position: absolute; height:100%; width:100%; top:0; left:0; display:none; text-align:center; } .popup_bg { background:rgba(0,0,0,0.4); position:absolute; z-index:1; height:100%; width:100%; } .popup_img { position: relative; margin:0 auto; z-index:2; max-height:94%; max-width:94%; margin:1% 0 0 0; } В классе popub выводится и позиционируется изображение, но как можно прописать его позиционирование на видимую обасть браузера? Решил  position: fixed;  у классов .popub_bg и .popub_img и margin выровнять как нужно. Может кому пригодится. 
  • Popular Contributors

    Nobody has received reputation this week.

×
×
  • Create New...