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

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


javascript html css screen-size
person DonHP    schedule 16.08.2014    source источник
comment
alistapart.com/article/responsive-web-design ♦ creativebloq.com/netmag/   -  person Hashem Qolami    schedule 16.08.2014
comment
В наши дни люди используют различные размеры экрана для просмотра веб-сайтов. С точки зрения веб-дизайна это означает ОТВЕТСТВЕННЫЙ ДИЗАЙН. Google это, и вы получите много идей об этом.   -  person jGupta    schedule 16.08.2014

Ответы (1)


arrow_upward
2
arrow_downward

Для этого можно использовать медиа-запросы 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 трюках

person Krupal Shah    schedule 16.08.2014
comment
Большое спасибо за ответ.. - person DonHP; 17.08.2014