Как настроить таргетинг на определенный размер экрана с помощью медиа-запроса @media?

Я новичок в отзывчивом дизайне, теперь я играю с twitter bootstrap responsive.css. И я столкнулся с некоторыми проблемами с моим проектом.

Проблема в том, что моя левая колонка не рухнет (если это правильный термин), или не будет складываться. Я хочу, чтобы левая колонка сдвигалась ниже столбца span8 и изменяла ее ширину. На данный момент это то, что ширина левой колонки уменьшается и сжимает все содержимое внутри нее. Я нацелен на размер экрана для мобильных устройств с экранами мультимедиа 768x1024.

Моя основная разметка для макета - span8 для левой и span4 для правой. span4 - это где мои другие блоки.

<div class="row">
<div class="span8">
    some block with contents
</div>

<div classs="span4">
    <div class="sideBlock"><!--fluid width was set-->
        <img src="http://placehold.it/298x77">
    </div>
</div>

Мой главный вопрос: как мы настраиваем конкретный размер экрана с помощью медиа-запросов (используя загрузочный бутлет Twitter). А затем настройте его в соответствии с нашими потребностями?

Ответы

Ответ 1

Я, наконец, получил это, прочитав статьи из блогов и вопросов, на которые был дан ответ, и статьи, опубликованные из ваших комментариев по этому вопросу.

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

I.E., @media (min-width) {mystyle here}

@media (min-width: 1200px) {
      .myContainer {
           width: 960px;
           margin: 0 auto;

      }
      .myleftBlock-should-collapse {
           float: none;
           width: 100%;
      }

 }

Поскольку я использую файл Twitter Bootstrap Responsive.css, мне нужно настроить медиа-запрос для определенного окна просмотра, чтобы он соответствовал моим потребностям дизайна.

Хорошо, так как я проектирую фиксированную ширину 960 пикселей, я буду настраивать и переучитывать ширину для моих классов .container и span. Я конвертирую пиксель в процентную базу из моей базовой ширины 960px.

Таким образом, любой блок или элемент, который я хотел бы свернуть, скрыть или показать в определенных видовых экранах, должен быть соответствующим образом оформлен внутри медиа-запроса.

И... Новая вещь, которую я узнал о гибком дизайне. Размер экрана отличается от вида.

Ответ 2

Поскольку вы используете Bootstrap, используйте переменные по умолчанию для целевых размеров экрана:

// Extra small screen / phone
$screen-xs:                  480px !default;

// Small screen / tablet
$screen-sm:                  768px !default;

// Medium screen / desktop
$screen-md:                  992px !default;

// Large screen / wide desktop
$screen-lg:                  1200px !default;

Пример:

@media (min-width: $screen-sm) and (max-width: $screen-md) {
    /*
     * styles go here
     */
}

Ответ 3

Класс run-fluid exapmles в Bootstrap можно найти здесь http://getbootstrap.com/2.3.2/examples/fluid.html

Если вы хотите, чтобы Visual Studio помогала с CSS, то получите файл LESS из http://bootswatch.com и получите Twitter.Bootstrap.Less nuget пакет. Затем добавьте следующее в файл bootswatch.less

@import url("bootstrap/bootstrap.less");

Существует альтернатива Boostrap row-fluid, называемая 'Foundation' http://foundation.zurb.com/develop/download.html#customizeFoundation

В нем есть определения для "малых" и "больших" носителей и многое другое:

<div class="show-for-small" style="text-align: center">
    <a href="#">Desktop here</a>
</div>
<div class="large-4 columns hide-for-small">
    <a href="#">
        <div class="panel radius callout" style="text-align: center">
        <strong>Mobile here</strong>
        </div>
    </a>
</div>

Ответ 4

Вам нужно использовать класс row-fluid (вместо класса row), чтобы извлечь выгоду из чувствительной части Bootstrap. Подробнее на http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem.

Итак, ваш основной макет должен быть:

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

Ответ 5

Еще одна интересная особенность заключается в том, что вы также можете использовать медиа-запросы в медиа- атрибуте <link>.

<link href="style.css" rel="stylesheet">
<link href="justForFrint.css" rel="stylesheet" media="print">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 768px)">

При этом браузер загрузит все CSS-ресурсы независимо от атрибута media. Разница в том, что если media-запрос атрибута media оценивается как false, то этот файл .css и его содержимое не будут блокировать рендеринг.

Поэтому рекомендуется использовать атрибут media в <link> поскольку он гарантирует лучшее взаимодействие с пользователем.

Здесь вы можете прочитать статью Google об этой проблеме https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css.

Некоторые инструменты, которые помогут вам автоматизировать разделение кода CSS в разных файлах в соответствии с вашими медиа-запросами.

Webpack https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splitting-plugin

PostCSS https://www.npmjs.com/package/postcss-extract-media-query