<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

В начале курса у нас будет только идея, а в конце готовый продукт, который можно использовать в практических целях.

В рамках упражнений курса Вы параллельно со мной будете создавать свою большую программу на Java, что даст Вам необходимую практику, после которой для Вас уже не будет разницы, какого размера создавать программы.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Медиа-запросы в CSS

Медиа-запросы в CSS

В предыдущей статье я рассказал о том, что такое адаптивная вёрстка, и для чего она нужна. И там я сказал, что основной механизм адаптивной вёрстки - это медиа-запросы. Вот о медиа-запросах в CSS мы и поговорим в этот раз.

Давайте сразу разберём пример медиа-запроса:

@media screen and (max-width: 768px) {
  body {
    font-size: 9pt;
  }
}

Данный код означает следующее: "Если ширина окна браузера 768px, то применить стили, указанные в фигурных скобках". Чтобы лучше понять, как это работает, напишите вот такой код:

<!DOCTYPE html>
<html>
<head>
  <title>Медиа-запросы</title>
  <style>
    body {
      font-size: 15pt;
    }
    @media screen and (max-width: 768px) {
      body {
        font-size: 9pt;
      }
    }
  </style>
</head>
<body>
  <p>Текст</p>
</body>
</html>

Откройте этот код в браузере и обратите внимание на размер текста. Теперь начните уменьшать ширину окна браузера, и когда она достигнет 768px, то текст заметно уменьшится. Вот это и есть адаптивная вёрстка и работа медиа-запросов в CSS.

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

Так же есть и другие параметры, такие как min-width, который будет срабатывать при указанной ширине и больше. Аналогичные параметры max-height и min-height, отвечающие за высоту. Так же можно комбинировать разные параметры через and:

@media screen and (max-width: 768px) and (max-height: 300px) {
  body {
    font-size: 9pt;
  }
}

В данном случае стили будут подключаться только при ширине меньше, либо равной 768px и при высоте меньше, либо равной 300px.

Что касается практики, то могу смело сказать, что в 95% случаях используется лишь один max-width. Иногда ещё и min-width. И ещё раз повторяю, что есть и другие медиа-запросы в CSS, но забивать ими Вашу голову не буду. Но если очень хочется, то их можно посмотреть в справочнике.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (4):

pavell pavell 14.05.2014 16:38:21

Когда пишу 2 и больше медиа запроса то работает только 1. Например пишу так:\ @media screen and (max-width: 1024px) { #name{ width:300px; overflow-x: auto; } } @media screen and (max-width: 1680px) { #name{ width:1300px; overflow-x: auto; } } Но в любом случае всегда размер блока 1300px (как при размере экрана 1680px. И когда открываю окно размером 1024px то всё равно размер блока 1300px.

Ответить

alexandrdante alexandrdante 18.05.2014 20:04:33

а вы разберитесь сначала со screen,а потом вопросы задавайте. Вы своё условие то хоть поняли?) Напишите правильно запрос,и всё будет работать. Вопросы задавайте в службу поддержки,там ответят быстрее. да и 2 media - извращение,если честно)

Ответить

Strateg Strateg 18.08.2014 19:08:57

А медиа-запросы только в CSS 3 есть?

Ответить

SuperSonicFire SuperSonicFire 22.06.2016 09:41:29

Если речь идёт о кроссплатформенной вёрстке, то основным вопросом будет , наверное, такой: каково оптимальное число медиазапросов и с какими ширинами экранов, чтобы сайт корректно отображался на любых устройствах с экраном от 320 пикселей? С помощью плагина для Crome я собрал следующие ширины в пикселях: 320, 375, 480, 568, 600, 640, 667, 768, 800, 900, 960, 1024. Понятно, что под каждую ширину верстать глупо, но под какие - следует, а под какие - нет? Второй вопрос: а можно ли задать в медизапросе интервал ширин, например от 320 до 375 px? Если да, то можно минимизировать число медиазапросов, сочетая адаптивную и резииновую вёрстку.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.