Динамическая ширина сайта

В наши дни люди используют разные размеры экрана для просмотра веб-сайтов. Мне нужно выяснить, как настроить динамическую ширину сайта, которая может автоматически изменяться в зависимости от размера экрана. Я создал сайт с шириной 1200 пикселей. Веб-сайт и контент слишком велики для экрана моего ноутбука. Но он больше подходит для моего другого монитора из-за большого размера. Могу ли я настроить эту ширину для динамического изменения в зависимости от размера монитора пользователя?

Источник

1 ответ

Решение

Вы можете использовать медиа-запросы CSS для этого. (примечание: старые версии браузеров не будут поддерживать)

Media Queries - это модуль CSS3, позволяющий адаптировать рендеринг контента к таким условиям, как разрешение экрана (например, экран смартфона или экран компьютера).

Более конкретно, он будет смотреть на следующее:

  1. высота и ширина устройства высота и ширина браузера

  2. разрешение экрана ориентация устройства (для мобильных телефонов и

    таблетки; портрет или пейзаж)

CSS2 позволяет вам указать таблицу стилей для определенного типа носителя, такого как экран или печать. Теперь CSS3 делает его еще более эффективным, добавляя медиа-запросы.

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

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

Пример:

Следующий CSS будет применяться, если область просмотра меньше 600 пикселей.

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

Если вы хотите создать ссылку на отдельную таблицу стилей, поместите следующую строку кода между <head> тег.

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

Несколько медиа-запросов:

Вы можете объединить несколько медиа-запросов. Следующий код будет применяться, если область просмотра составляет от 600 до 900 пикселей.

@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #333;
  }
}

Ширина устройства:

Следующий код будет применяться, если максимальная ширина устройства составляет 480 пикселей (например, дисплей iPhone). Примечание: max-device-width означает фактическое разрешение устройства, а max-width означает разрешение области просмотра.

@media screen and (max-device-width: 480px) {
  .class {
    background: #000;
  }
}

Также это хорошая статья для чтения конкретных таблиц стилей разрешения CSS.

Источник
Другие вопросы по тегам