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

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

2 голосов
/ 11 марта 2009

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

Ответы [ 7 ]

3 голосов
/ 11 марта 2009

Fluid-width достигается при использовании процентных единиц или единиц em. Это все о создании макета сайта на основе сеток и контейнеров. Читать дальше .

2 голосов
/ 12 марта 2009

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

1 голос
/ 11 марта 2009

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

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

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

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

1 голос
/ 11 марта 2009

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

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

0 голосов
/ 12 марта 2009

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

Джош Стодола и Рич Брэдшоу предложили ответ 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>

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

0 голосов
/ 12 марта 2009

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

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

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

0 голосов
/ 11 марта 2009

В вашем html: 

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

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

#content {
    width:100%;
}

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

#content {
    min-width:500px;
    max-width:1000px;
}
...