Jump to content
  • 0

Проблема с атрибутом media

Yudin

Asked by Yudin,

 Share

Question

Yudin Explorer

Yudin

Posted
Posted

Недавно начал учиться верстке. Столкнулся с адаптацией, и тут возникла одна проблема: моя среда разработки как-будто не видит медиа-запросы. Написал примитивный код, чтобы проверить. У друзей код работает, у меня нет. Подскажите с чем это может быть связано. Прикрепляю скрины.html.png.770d875d3129cc47cc2d6f11d16b35ac.pngcss.png.cbbb45709ef84809c5113bcddc9d0a9e.png1.thumb.png.89544a096f9c9834ba93a965e76a6a19.png2.thumb.png.927601e59162569500495e479f0ac3fc.png

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0
Tilonorrinco Explorer

Tilonorrinco

Posted
Posted

Скорее всего уже не актуально, но вдруг: обычно телефоны масштабируют страницу, увеличивая искусственно плотность пикселей. Поэтому адаптивные параметры у вас не применяются. Вам нужно явно указать, что масштабировать страницу не нужно, чтобы при уменьшении вьюпорта медиазапросы начали работать. Для этого в head прописывают специальный мета--тэг: 

<meta name="viewport" content="width=device-width, initial-scale=1">

 

Link to comment
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
Answer this question...

×   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.

×
 Share
Go to question listing

  • Similar Content

    • Алеся
      Адаптивность колонок
      By Алеся
      Подскажите, пожалуйста, что можно прописать, чтобы при уменьшении разрешения экрана колонки справа смещались вниз? Весь код в песочнице https://jsfiddle.net/fzbkeLyt/
      Пробовала:     Но не сработало.
      @media (max-width: 1200px) {
        .container {
          max-width: 970px;
        }
      }
       
      @media (max-width: 992px) {
        .container {
          max-width: 750px;
        }
      }
       
      @media (max-width: 767px) {
        .container {
          max-width: none;
        }
      }
    • azaqwerty
      Помогите разобраться в sass @import
      By azaqwerty
      Здравствуйте! Не могу сделать импорт в sass. Не могу понять в чем дело? По урокам делал, как все показывали, но не выходит! Импорт для оптимизаций и адаптаций сайта 




    • MagenDavid
      Интересный вопрос по мобильной верстке!
      By MagenDavid
      Всем привет! Задание:
       
      При размерах экрана от 800px и больше - col1=30%,col2=30%,col3=30% от ширины экрана и рассположены в 3 колонки; При размерах экрана от 500px до 800px - col1=100%,col2=50%,col3=50% от ширины экрана и первый блок сверху, два остальных снизу вместе; При размерах экрана от 0 до 500px - col1=90%,col2=90%,col3=90% от ширины экрана и расположены друг под другом.   Вопрос: как сделать, чтобы в колонках отображалось нужное  значение в %-х в зависимости от размера экрана?       unit.zip
    • Неугомонный
      Вопрос по @media
      By Неугомонный
      <style> .right { float: right; } @media only screen and (max-width: 600px) { .zzzz { display: none; } } </style> <div class="right zzzz"> // ... </div> Необходимо создавать класс zzzz для шаблона больше чем 600px если мне нечего будет вписать в него никаких параметров ?
    • Неугомонный
      Вопрос по @media
      By Неугомонный
      Всем привет, есть документация под нормы расширения экранов @media screen , где обозначено до скольки PX я могу скажем так воображать себе в голове под что я верстаю телефон/планшет/пк ?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept