Jump to content
  • 0

Медиа-запросы VS Fluid Grid


Demon_gms
 Share

Question

Начал изучать вёрстку сайтов под любое устройство. Ну т.е. адаптивный дизайн. Как я понимаю существует способ создания с помощью Медиа-запросов с подключением Respond.js для IE. Но так же есть технология создания одного сайта вычисляя с помощью формулы пропорций в процентах «target / context = result» для всех устройств(Fluid Grid).

Все таки как правильно делать и какие сильные-cлабые стороны данных вопросов. Мне почему-то кажется что с помощью Fluid Grid не совсем получается то что надо и проблем с будущей версткой будет очень много..Например нужно в таком случае подгонять изображения, контент и т.п. постоянно. Прав ли я?

Попробовал создать с помощью Fluid Grid все вроде правильно. Проверил для всех устройств отображение, все как есть. Пока весь сайт не стал верстать, подскажите что может быть не так..

З.Ы. Простите меня если что.. (прощенное воскресенье сегодня) :)

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

Это зависит от сложности дизайна.

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

Если у вас только шапка, да текст в одну колонку, можно обойтись той самой формулой.

В любом случае, ничто не мешает комбинировать оба способа, руководствуясь удобством использования и здравым смыслом. :)

Link to comment
Share on other sites

  • 0

Итан Маркотт пишет, в основе отзывчивого дизайна лежат:

- гибкая сетка (т.е. %);

- гибкие изображения;

- медиазапросы

Так что надо юзать и флюид сетку и медиа-запросы. Без гибкой сетки придется для каждого медиа-запроса переписывать ширину всех блоков. Гемор же.

Для медиа-запросов можно ещё использовать http://code.google.c...ediaqueries-js/

Edited by SuperJerk
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

  • Similar Content

    • By Seendorei
      Здравствуйте уважаемые форумчане, подскажите пожалуйста, не получается сделать блок адаптивным(я в этом не очень разбираюсь =)) ). Уже голова кипит, все попереисправлял, переделал, удалял и добавлял, что просто запутался, очень прошу вас распутать и подсказать как правильно, чтобы я точно знал :). Спасибо заранее.
      В чем собственно проблема: А в том, что этот блок не уменьшается пропорционально ширине экрана.
      На 1 скриншоте он вообще выпадает из общего контента. А на 2 скриншоте появляется горизонтальная прокрутка.
      Пересмотрел много роликов и статей, но чет так сильно запутался во всем этом :((.

      CSS code блока и т.д: 
       
      @media (max-width: 320px) {   .wat{     left: 260px;   } } .wat{   margin:0;   margin-left: 5.5em;   left: auto;   top: 260px;   border: 3px red solid;   border-radius: 3px;   width: 150px; height: 50px;   position: relative;   padding-left: 4px;   padding-top: 0px;   display: block; } #btn3{   position: absolute;   margin-left: 8px;   top: 13px;   border: 3px red solid;   border-radius: 3px;   width: 150px; height: 50px; } span{   font-size: 16pt;   margin-left: 50px;   position: absolute;   top: 14px;   left: -1px;   font-size: 16pt;   color: white; } .opa{   display: block;   border-radius: 3px;   border: 3px red solid;   width: 150px; height: 50px;   position: relative;   z-index: 100000;   margin-top: -12.8em;   margin-left: 18.5em; } @media (max-width: 320px){   .opa{     width: 25%;     height: auto;   } } Вот HTML Код:
      <ul id="slides"> <li class="slide showing">Slide 1 <!--<div class='wat'><img id='btn3' src='app2.png'></img></div>--> </li> <li class="slide">Slide 2</li> <li class="slide">Slide 3</li> </ul> <div class='opa'> <img src='app.svg'></img> <span>App Store</span> </div>  
       
              
    • By Rusik177
      Приветствую друзья не могу понять почему не работает адаптивка.  Осваиваю адаптивную верстку на основе Grid . По задумке у меня несколько колонок которые при сжатии экрана менее чем 500 пикс., должны стать в две колонки. Не могу понять в чем подвох. Вроде бы пример элементарный.  Может какая синтаксическая ошибка. Буду оч признателен если подскажете. 

    • By Yudin
      Недавно начал учиться верстке. Столкнулся с адаптацией, и тут возникла одна проблема: моя среда разработки как-будто не видит медиа-запросы. Написал примитивный код, чтобы проверить. У друзей код работает, у меня нет. Подскажите с чем это может быть связано. Прикрепляю скрины.
    • By Ich
      Есть у меня слайдер, каждый слайд - картинка, и на каждой картинке есть кнопка. Так вот задача, чтобы при адаптивном уменьшении картинки, кнопка сохраняла положение и изменяла размер пропорционально. Возможно ли это?
      Вот пример https://jsfiddle.net/yhnf3m9L/1/
      положение вроде сохраняется, а вот размер - беда.
    • By FlixTheBro
      В ступоре. Очень прошу помощи.
      Дело такое. Верхняя шапка сайта (фиолетовая) не хочет адаптироваться под телефоны, причём всё остальное работает, кроме самой шапки и футера.
      Так же замечена очень интересный баг: при проверки адаптивности сайта ресайзом окна или масштабированием в google chrome для десткопа или даже проверке с помощью специальных ресурсов - всё работает как надо. Вы можете сами проверить по адресу flixthebro.com
      При этом заходя на сайт с любого мобильного устройства (тестировал на 3-х) выдаёт почему то другой результат.
      Ещё несколько забавных примечаний: допустим установил я размер текста в шапке 32px и в контенте 32px. На телефоне размер шрифта в шапке никак не сопоставим с размером шрифта в контенте и намного мельче. То же самое и с футером. / Так же я эксперементрировал и пробовал убирать разные строки из css и ничего не получалось. Чем же эти два фиолетовых блока провинились? Почему они такие "особенные"?
      Ах да ещё надо бы сказать, что сайдбар сделан только для того, чтобы в случае надобности начать его использовать активировать легко и просто, сейчас он абсолютно не нужен, но в отличие от этих двух работает отлично.
      Я отчаялся и совсем перестал хоть каплю иметь соображения из-за чего это может быть. Прошу помощи от вас, господа формучане.
       
       
       
×
×
  • 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