Ширина страницы html: max-width | htmlbook.ru

Leave a Comment / Html / By /

max-width | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
7.08.0+1.0+4.0+2.0+1.0+2.1+2.0+

Краткая информация

Значение по умолчаниюnone
НаследуетсяНет
ПрименяетсяКо всем элементам, кроме встроенных и таблиц
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/visudet.html#propdef-max-width

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Устанавливает максимальную ширину элемента. Значение ширины элемента будет вычисляться в зависимости от значений установленных свойств width, max-width и min-width. В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных стилевых свойств.

Табл. 1. Ширина элемента
Значения свойствШирина
min-width<width<max-widthwidth
  width<max-widthwidth
  width>max-widthmax-width
min-width>width>max-widthmin-width
min-width>width<max-widthmin-width

Данные из таблицы следует понимать следующим образом. Если значение ширины (width) больше значения max-width, то ширина элемента принимается равной значению max-width.

Синтаксис

max-width: значение | проценты | none | inherit

Значения

В качестве значений принимаются пикселы (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются.

none
Отменяет действие этого свойства.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Версия сайта для КПК</title>
  <style media="handheld">
   body {
    max-width: 320px; /* Максимальная ширина страницы в пикселах */ 
   }
  </style>
 </head>
 <body>
  <h2>Текст заголовка</h2>
  <p>Текст примера</p>
 </body>
</html>

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

Объектная модель

[window.]document.getElementById(«elementID»).style.maxWidth

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Размеры

CSS по теме

  • max-width

Статьи по теме

  • Резиновый двухколоночный макет
  • Резиновый трёхколоночный макет

Рецепты CSS

  • Почему max-width не работает для таблицы?

html — Как задать минимальную ширину сайта?

Создал страницу для тестирования отображения этой страницы на мобильных устройствах. Указал в head name width=800, а wrapper min-width: 800px; и width: 100%;.

Проверяю на android chrome — браузер не чувствует минимальной ширины wrapper и по умолчанию часть страницы за пределами видимости (пример 1), когда требуется, чтобы браузер понимал, какой минимальной ширины страницу ему нужно показать (пример 2).

Как правильно задать минимальную ширину страницы так, чтобы мобильный браузер изначально ее показал, как на примере 2?

Пример 1:

Пример 2:

html,
body
{
    padding: 0;
    margin: 0;
    width: 100%;
}

.wrapper
{
    box-sizing: border-box;
    min-width: 800px;
    width: 100%;
    padding: 20px;
    background: antiquewhite;
}
<!DOCTYPE html>
<html lang="ru">
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=800, initial-scale=1">
        <title>Title</title>
        <link href="/css/common. css" rel="stylesheet">
</head>
<body>

<div>
        Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты.
        Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.
</div>

</body>
</html>
  • html
  • css

12

Убрал ширину у body; заменил

content="width=800px" на content="width=device-width, initial-scale=1, shrink-to-fit=no".

width=device-width

нужен для того, чтобы «ширина была равна ширине устройства»

shrink-to-fit=no

нужен для запрета масштабирования в соответствии с окном просмотра

Добавил @media-запросы. Проверьте.

 
@media (min-width: 800px) {
html,
body
{
    padding: 0;
    margin: 0;
}

. wrapper
{
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
    background: antiquewhite;
}
}
<!DOCTYPE html>
<html lang="ru">
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Title</title>
        <link href="/css/common.css" rel="stylesheet">
</head>
<body>

<div>
        Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты.
        Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.
</div>

</body>
</html>

6

Укажите в хедере

 <meta name="viewport" content="width=800px, initial-scale=1">

Wrapperу не ничего не указывать(он и так по умолчанию растянется на всю ширину)

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — Как сохранить фиксированную ширину сайта (независимо от размера экрана)

спросил

11 лет, 6 месяцев назад

Изменено 4 года, 3 месяца назад

Просмотрено 78 тысяч раз

Я разрабатываю веб-сайт. Я хочу, чтобы мой сайт был шириной 980 пикселей. Я могу легко сделать это на своем ноутбуке, установив справа и слева полей CSS Box как 15%. Но меня беспокоит то, что когда мой веб-сайт открывается на другом компьютере без широкоэкранного режима, эти 15% будут создавать искажения. Я хочу, чтобы мой сайт имел разрешение 980 пикселей, каким бы ни был размер экрана. Пожалуйста помоги!

Как вы можете видеть на прикрепленном изображении. Ящики находятся на расстоянии 15% от сторон. Если экран будет короче для ПК, то эти поля будут перекрываться.

  • HTML
  • CSS

2

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

 <дел>
    
Левый столбец

    
Правый столбец

Ключ auto margin для левого и правого. Это выровняет по горизонтали этот div размером 980 пикселей по центру и сохранит ширину, несмотря ни на что.

2

Я использую следующие правила стиля для создания макетов фиксированной ширины, совместимых с разными браузерами:

 body { min-width: 980px; выравнивание текста: по центру; }
#wrapper { ширина: 980 пикселей; поле: 0 авто; выравнивание текста: по левому краю; }

Поместите div с идентификатором «обертка» внутри вашего тега body, и обертка всегда будет в центре экрана и всегда будет на 980 пикселей;

установить ширину тега body и установить выравнивание стиля CSS по центру

1

Создайте контейнер div для части страницы, размер которой должен быть 980 пикселей, и установите для него значение ширина: 980 пикселей; margin: 0 auto , чтобы он был центрирован и 980px.

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

html — есть ли новый стандарт ширины веб-страницы? Сколько пикселей?

спросил

Изменено 11 лет, 2 месяца назад

Просмотрено 72к раз

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

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

Я создаю макет страницы с тремя столбцами. Крайний левый столбец должен быть привязан к левой стороне браузера. Если браузер установлен очень широко, в правой части браузера есть огромная вертикальная мертвая зона. На самом деле это не проблема, поскольку я сомневаюсь, что большинство людей открывают свой браузер на 100% на мониторе с разрешением 1600 пикселей.

У меня такой вопрос: существует ли стандартная ширина в пикселях, которую, как вы предполагаете, используют 90% людей для просмотра веб-сайта?

  • html
  • css
  • браузер

960 пикселей!

Он имеет множество номиналов, что позволяет вам разделить страницу на несколько столбцов. Я предлагаю взглянуть на http://960.gs

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

2

Вы также можете рассмотреть возможность использования так называемого «отзывчивого» подхода:

http://978.gs/

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

2

Если бы вы делали страницы с плавной шириной, это не было бы проблемой.

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

Если я создаю страницу с фиксированной шириной, я обычно использую 980 пикселей. Появляется множество нетбуков с разрешением около 1024×800, а некоторые нет.