Как реализовать веб-страницу, которая масштабируется при изменении размера окна браузера? - PullRequest
5 голосов
/ 18 сентября 2008

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

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

У меня есть рабочее решение, использующее AJAX PRO и DIVs с переполнением: auto и хук onwindow, но он громоздок. Есть ли лучший способ?

  • спасибо всем за ответы, я собираюсь попробовать их все (или, по крайней мере, большинство из них), а затем выбрать лучшее решение в качестве ответа на эту тему

  • кажется, что лучше всего использовать CSS и проценты, что я и делал в оригинальном решении; использование видимости: скрытый div, установленный на 100% на 100%, позволяет измерить клиентскую область окна [сложно в IE, в противном случае], а функция onwindowresize javascript позволяет методам AJAXPRO запускаться при изменении размера окна, чтобы перерисовать содержимое ячейки макета в новом разрешении

РЕДАКТИРОВАТЬ: мои извинения за то, что не совсем ясно; Мне нужна была «жидкая компоновка», в которой основные элементы («панели») масштабировались при изменении размеров окна браузера. Я обнаружил, что мне пришлось использовать вызов AJAX, чтобы повторно отобразить содержимое панели после изменения размера, и сохранить переполнение: авто включено, чтобы избежать прокрутки

Ответы [ 11 ]

14 голосов
/ 18 сентября 2008

вместо использования в css скажем "width: 200px", используйте такие вещи, как "width: 50%"

Это позволяет использовать 50% от всего, что есть, поэтому в случае:

<body>
 <div style="width:50%">
  <!--some stuff-->
 </div>
</body>

Теперь div всегда будет занимать половину окна по горизонтали.

7 голосов
/ 18 сентября 2008

Если у вас нет особых требований, я не уверен, зачем здесь нужен JS. Табличные макеты - это простой (и архаичный) способ создания жидких макетов в html, но div-макеты с помощью css также допускают жидкие макеты, см. http://www.glish.com/css/2.asp

5 голосов
/ 18 сентября 2008

Это действительно зависит от веб-страницы, которую вы реализуете. Как правило, вы хотите 100% CSS. При определении размеров элементов, которые будут содержать текст, не забывайте стремиться к текстовым ориентированным размерам, таким как em, ex, а не px.

Поплавки опасны, если вы новичок в CSS. Я не новичок, и они все еще немного сбивают меня с толку. Избегайте их, где это возможно. Обычно вам просто нужно изменить свойство display для div или элемента, с которым вы все равно работаете.

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

Я не уверен, для кого вы делаете этот сайт (весело, прибыль, и то и другое), но я бы посоветовал вам долго и усердно подумать о том, как сбалансировать чистоту CSS с помощью нескольких хаков, которые помогут вам увеличить вашу эффективность. Ваш веб-сайт должен быть на 100% доступным? Нет? Тогда винт это. Делайте сначала то, что вам нужно, чтобы заработать деньги, а потом срывайтесь с ума от своей страсти и делайте все, на что у вас есть время.

5 голосов
/ 18 сентября 2008

Да, звучит так, как будто вы хотите посмотреть на изменчивый макет CSS. Ресурсы по этому вопросу, просто макет Google Fluid CSS, должны дать вам много вещей для проверки. Также посмотрите на этот предыдущий вопрос для некоторых хороших указателей.

4 голосов
/ 18 сентября 2008

Что еще нужно учитывать, это то, что JavaScript не будет обновляться непрерывно во время изменения размера окна, поэтому будет заметная задержка / прерывистость. Благодаря гибкой CSS-компоновке элементы экрана будут обновляться практически мгновенно для плавного перехода.

2 голосов
/ 18 сентября 2008

Лучший способ, который я видел, это использовать CSS-инструменты YUI , а затем использовать проценты для всего. Сетки YUI допускают различную фиксированную ширину или макеты жидкости с размерами столбцов, указанными в долях доступного пространства. Существует YUI Grids Builder , который поможет разобраться. YUI Fonts дает хорошие средства управления размером шрифта. Есть несколько хороших шпаргалок , которые показывают вам, как раскладывать вещи, а также полезные вещи, например, какой процент указывать для размера шрифта стольких пикселей.

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

1 голос
/ 13 ноября 2008

используйте ems. jontangerine.com и simplebits.com являются удивительными примерами. Дальнейшее чтение - Невероятные Em & Elastic Layouts с CSS от Jon Tan

1 голос
/ 08 октября 2008

Спасибо за все предложения! Похоже, уродливые вещи, которые я должен был сделать, были необходимы. Следующее работает (на моей машине, в любом случае) в IE и FireFox. Я могу сделать статью из этого для CodeProject.com позже; -)

Этот javascript входит в раздел :

<script type="text/javascript">
var tmout = null;
var mustReload = false;

function Resizing()
{
    if (tmout != null)
    {
        clearTimeout(tmout);
    }
    tmout = setTimeout(RefreshAll,300);
}
function Reload()
{
    document.location.href = document.location.href;
}
//IE fires the window's onresize event when the client area 
//expands or contracts, which causes an infinite loop.
//the way around this is a hidden div set to 100% of 
//height and width, with a guard around the resize event 
//handler to see if the _window_ size really changed
var windowHeight;
var windowWidth;
window.onresize = null;
window.onresize = function()
{
    var backdropDiv = document.getElementById("divBackdrop");
    if (windowHeight != backdropDiv.offsetHeight ||
        windowWidth != backdropDiv.offsetWidth)
    {
        //if screen is shrinking, must reload to get correct sizes
        if (windowHeight != backdropDiv.offsetHeight ||
            windowWidth != backdropDiv.offsetWidth)
        {
            mustReload = true;
        }
        else
        {
            mustReload = mustReload || false;
        }
        windowHeight = backdropDiv.offsetHeight;
        windowWidth = backdropDiv.offsetWidth;
        Resizing();
    }
}
</script>

начинается следующим образом:

<body onload="RefreshAll();">
    <div id="divBackdrop" 
        style="width:100%; clear:both; height: 100%; margin: 0; 
            padding: 0; position:absolute; top:0px; left:0px; 
            visibility:hidden; z-index:0;">
    </div>

DIVs плавают влево для макета. Я должен был установить высоту и ширину в процентах, просто не доходя до полной суммы (например, 99,99%, 59,99%, 39,99%), чтобы не допустить обтекания поплавков, вероятно из-за границ на DIV.

Наконец, после раздела контента, еще один блок JavaScript для управления обновлением:

var isWorking = false;
var currentEntity = <%=currentEntityId %>;

//try to detect a bad back-button usage;
//if the current entity id does not match the querystring 
//parameter entityid=###
if (location.search != null && location.search.indexOf("&entityid=") > 0)
{
    var urlId = location.search.substring(
        location.search.indexOf("&entityid=")+10);
    if (urlId.indexOf("&") > 0)
    {
        urlId = urlId.substring(0,urlId.indexOf("&"));
    }
    if (currentEntity != urlId)
    {
        mustReload = true;
    }
}
//a friendly please wait... hidden div
var pleaseWaitDiv = document.getElementById("divPleaseWait");
//an example content div being refreshed via AJAX PRO
var contentDiv = document.getElementById("contentDiv");

//synchronous refresh of content
function RefreshAll()
{
    if (isWorking) { return; }  //no infinite recursion please!

    isWorking = true;
    pleaseWaitDiv.style.visibility = "visible";

    if (mustReload)
    {
        Reload();
    }
    else
    {
        contentDiv.innerHTML = NAMESPACE.REFRESH_METHOD(
            (currentEntity, contentDiv.offsetWidth, 
             contentDiv.offsetHeight).value;
    }

    pleaseWaitDiv.style.visibility = "hidden";
    isWorking = false;
    if (tmout != null)
    {
        clearTimeout(tmout);
    }
}

var tmout2 = null;
var refreshInterval = 60000;

//periodic synchronous refresh of all content
function Refreshing()
{
    RefreshAll();
    if (tmout2 != null)
    {
        clearTimeout(tmout2);
        tmout2 = setTimeout(Refreshing,refreshInterval);
    }
}

//start periodic refresh of content
tmout2 = setTimeout(Refreshing,refreshInterval);

//clean up
window.onunload = function() 
{
    isWorking = true;
    if (tmout != null)
    {
        clearTimeout(tmout);
        tmout = null;
    }
    if (tmout2 != null)
    {
        clearTimeout(tmout2);
        tmout2 = null;
    }

некрасиво, но это работает - что, я думаю, имеет значение; -)

1 голос
/ 23 сентября 2008

Используйте проценты! Скажем, у вас есть «главная панель», на которой лежит весь контент вашей страницы. Вы хотите, чтобы он всегда находился по центру окна и составлял 80% ширины окна.

Просто сделайте это:
#centerpane { наценка: авто; ширина: 80%; }

Тад!

1 голос
/ 18 сентября 2008

После попытки найти решение по книге я застрял с несовместимостью в Firefox или IE Поэтому я немного поработал и придумал этот CSS. Как видите, поля равны половине желаемого размера и отрицательны.

<head><title>Centered</title>
<style type="text/css">
body { 
        background-position: center center;
        border: thin solid #000000;
        height: 300px;
        width: 600px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -150px;
        margin-right: auto;
        margin-bottom: auto;
        margin-left: -300px;
    }
</style></head>     

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...