Как сделать так, чтобы веб-страница автоматически меняла ширину?

html expand liquid-layout

15406 просмотра

7 ответа

В HTML есть ли способ заставить веб-страницу расширяться до монитора пользователя? Как, скажем, у меня 15 дюймов, а у кого-то еще 24 дюйма. Веб-страница будет небольшой на их экране, но будет соответствовать мин. Как бы я увеличил страницу до 100% или, может быть, до 95%?

Источник Размещён: 12.11.2019 09:58

Ответы (7)


3 плюса

Ширина жидкости достигается при использовании процентных единиц или единиц em. Это все о создании макета сайта на основе сеток и контейнеров. Подробнее .

Автор: Josh Stodola Размещён: 11.03.2009 08:53

2 плюса

Гамбо, под "страницей" вы подразумеваете содержимое веб-страницы или окно, содержащее страницу? Если вы имеете в виду окно, ответ НЕ. Если вы имеете в виду контент, вы можете использовать жидкие макеты; Google это.

Автор: Jon Davis Размещён: 11.03.2009 09:23

1 плюс

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

Возможно, плагин Firefox для веб-разработчиков окажется полезным, поскольку он позволяет быстро изменять окно браузера в соответствии с определенными размерами, чтобы вы могли видеть, как макет выглядит в разных размерах. https://addons.mozilla.org/en-US/firefox/addon/60

Автор: Steve Claridge Размещён: 11.03.2009 08:48

1 плюс

Если вы не укажете конкретную ширину для какого-либо элемента веб-страницы, такого как тело или элемент, содержащий div, он будет расширен до ширины окна браузера.

Если вы хотите установить размер в пикселях для ширины пользователя, вы можете использовать javascript для динамической установки ширины:

<script type="text/javascript">
var userWidth = screen.width;
var userHeight = screen.height;
</script>

Тем не менее, вы , вероятно , следует использовать макет больше жидкости , которая будет автоматически расширяться с использованием ширины , указанных в процентах (например , установив ширину элемента с помощью CSS: width: 100%)

Автор: Rudd Zwolinski Размещён: 11.03.2009 08:53

0 плюса

В вашем HTML:

<div id="content">
<!-- Some content in here -->
<div>

Тогда в вашем css:

#content {
    width:100%;
}

или для большего контроля:

#content {
    min-width:500px;
    max-width:1000px;
}
Автор: Rich Bradshaw Размещён: 11.03.2009 08:49

0 плюса

HTML - это просто язык разметки для описания значения (текстового) содержимого. Например, <h1>Foobar</h1>просто означает, Foobarчто это заголовок первого уровня, но ничего не говорит о стиле, который должен отображаться.

Для оформления HTML-документа были введены каскадные таблицы стилей (CSS) . Но CSS также просто описательный язык и ничего не знает о пользовательском агенте . (Вы можете просто описать, что определенные элементы должны отображаться с определенной шириной и т. Д.)

Но JavaScript знает пользовательский агент. Вы можете использовать screenобъект для получения widthи heightэкрана или доступного окна просмотра .

Автор: Gumbo Размещён: 11.03.2009 09:07

0 плюса

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

Джош Стодола и Рич Брэдшоу предложили ответ HTML / CSS, который использует проценты для создания гибкого макета, который расширяется вместе с окном. Следующий код суммирует эту технику, создавая два столбца, один занимает 80% текущего окна браузера, а другой - 20%. Размеры столбцов изменяются, когда пользователь изменяет размер окна.

<html>
<head>
<style type="text/css">
    #content1 {
        background: #CC0000;
        height: 300px;
        width: 80%;
        float: left;
    }
    #content2 {
        background: #00CC00;
        height: 300px;
        width: 20%;
        float: left;
    }
</style>
</head>
<body>
<body>

<div id="content1"></div>

<div id="content2"></div>

</html>

Радд Зволински предоставил ответ, который ищет текущее разрешение пользователя. Другие уже опубликовали информацию о потенциальных неудобствах, вызванных использованием этого метода, но я не знаю, может быть, вы делаете какое-то художественное заявление о размерах разрешения. Вот тот же код выше с использованием этого метода:

<html>
<head>
<style type="text/css">
    #content1 {
        background: #CC0000;
        height: 300px;
        float: left;
    }
    #content2 {
        background: #00CC00;
        height: 300px;
        float: left;
    }
</style>
<script type="text/javascript">
    var userWidth = screen.width;
    var userHeight = screen.height;

    function resizeContent()
    {
        document.getElementById("content1").style.width = parseInt(userWidth * 0.8);
        document.getElementById("content2").style.width = parseInt(userWidth * 0.2);
    }
</script>
</head>
<body onload="resizeContent()">

<div id="content1"></div>

<div id="content2"></div>

</html>

Надеюсь, это поможет.

Автор: attack Размещён: 11.03.2009 09:09
Вопросы из категории :
32x32