Как реализовать веб-страницу, которая масштабируется при изменении размера окна браузера?
Как реализовать веб-страницу, которая масштабируется при изменении размера окна браузера?
Я могу расположить элементы страницы, используя либо таблицы, либо разделы CSS с плавающей запятой, но я хочу, чтобы масштаб отображения изменялся при изменении размера окна браузера.
У меня есть рабочее решение с использованием AJAX PRO и DIV с overflow: auto и крючком onwindowresize, но оно громоздко. Есть ли способ лучше?
спасибо всем за ответы, я намерен попробовать их все (или, по крайней мере, большинство из них), а затем выбрать лучшее решение в качестве ответа на эту тему
использование CSS и процентов, кажется, работает лучше всего, что я и сделал в исходном решении; использование видимости: скрытый div, установленный на 100% на 100%, дает возможность измерить клиентскую область окна [в противном случае затруднительно в IE], а функция javascript onwindowresize позволяет использовать методы AJAXPRO при изменении размера окна для перерисовки содержимое ячейки макета в новом разрешении
Обновлено: мои извинения за то, что я не совсем ясен; Мне нужен был «жидкий макет», в котором основные элементы («панели») масштабировались по мере изменения размера окна браузера. Я обнаружил, что мне пришлось использовать вызов AJAX, чтобы повторно отобразить содержимое панели после изменения размера и сохранить переполнение: автоматическое включение, чтобы избежать прокрутки
оба - макет всегда должен заполнять экран, а размеры шрифта должны увеличиваться или уменьшаться, чтобы оставаться пропорциональными И центрированными по горизонтали и вертикали
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 11
вместо использования в css скажите "width: 200px", используйте такие вещи, как "width: 50%"
Это заставляет его использовать 50% всего, что находится в нем, поэтому в случае:
<body>
<div style = "width:50%">
<!--some stuff-->
</div>
</body>
Div теперь всегда будет занимать половину окна по горизонтали.
это в основном работает для начального макета, но вам нужно настроить проценты для учета границ в разных браузерах, а также использовать ajax, запускаемый изменением размера окна, чтобы изменить размер содержимого div
Если у вас нет каких-либо конкретных требований, я не уверен, зачем здесь нужен JS. Табличные макеты - это простой (и архаичный) способ создания гибких макетов в html, но макеты div с CSS также позволяют создавать гибкие макеты, см. http://www.glish.com/css/2.asp
javascript необходим для обновления содержимого при изменении размера окна браузера
Ага, похоже, вы хотите взглянуть на гибкий макет CSS. Что касается ресурсов по этому вопросу, просто CSS-макет Google должен дать вам массу вещей, которые нужно проверить. Также взгляните на этот предыдущий вопрос для некоторых хороших указателей.
Еще следует учитывать то, что JavaScript не будет обновляться постоянно, пока изменяется размер окна, поэтому будет заметная задержка / прерывистость. Благодаря гибкому макету CSS элементы экрана будут обновляться почти мгновенно, обеспечивая плавный переход.
javascript необходим для запуска обновления содержимого, страница не полностью статична
и это нормально, я имел в виду использование JavaScript с событием onresize.
Лучший способ, который я видел для этого, - использовать инструменты CSS Юй, а затем использовать проценты для всего. YUI Grids позволяет использовать различные макеты фиксированной ширины или гибкие макеты с размерами столбцов, указанными как доли доступного пространства. Есть YUI Grids Builder, чтобы помочь разложить вещи. YUI шрифты дает вам хороший контроль размера шрифта. Есть несколько хороших шпаргалки, которые показывают вам, как расположить вещи, и полезные вещи, например, какой процент указать для размера шрифта в такое количество пикселей.
Это дает вам возможность масштабировать позиционирование, но масштабирование всего сайта, включая размеры шрифтов, при изменении размера окна браузера немного сложнее. Я думаю, вам придется написать для этого какой-то плагин для браузера, что означает, что ваше решение не будет переносимым. Если вы находитесь в интрасети, это неплохо, поскольку вы можете управлять браузером на каждом клиенте, но если вам нужен сайт, доступный в Интернете, вам, возможно, придется переосмыслить свой пользовательский интерфейс.
Это действительно зависит от реализуемой веб-страницы. Как правило, вам понадобится 100% CSS. При изменении размеров элементов, которые будут содержать текст, не забывайте тяготеть к размерам, ориентированным на текст, таким как em, ex, а не px.
Поплавки опасны, если вы новичок в CSS. Я не новичок, и они все еще меня немного сбивают с толку. По возможности избегайте их. Обычно вам просто нужно изменить свойство display того div или элемента, над которым вы работаете.
Если вы сделаете все это и прочесываете Интернет, где у вас есть дополнительные трудности, у вас будут не только страницы, размер которых изменяется, когда браузер делает это, но также страницы, которые можно увеличивать и уменьшать, изменяя размер текста. В общем, сделайте это правильно, и конструкция будет прочной. Я видел, как это делается для сложных макетов, но это большая работа, столько же усилий, сколько программирование веб-страницы в определенных случаях.
Я не уверен, для кого вы делаете этот сайт (развлечение, прибыль, и то и другое), но я бы рекомендовал вам долго и серьезно подумать о том, как сбалансировать чистоту CSS с помощью нескольких хаков здесь и там, чтобы повысить вашу эффективность. . Ваш веб-сайт должен быть на 100% доступным? Нет? Тогда прикрутить. Делайте то, что вам нужно сделать, чтобы сначала заработать деньги, а затем сходите с ума от своей страсти и делайте все, на что у вас есть время.
сайт уже готов - он был для клиента - но, оглядываясь на него, мне не нравится то, что я должен был сделать, чтобы он заработал
Попробовав решение по книге, я застрял с несовместимостью в 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>
надеюсь, это поможет
интересное решение, но я не могу установить фиксированный размер тела
Используйте проценты! Допустим, у вас есть «главная панель», на которой находится все содержимое вашей страницы. Вы хотите, чтобы он всегда был по центру окна и составлял 80% ширины окна.
Просто сделайте это:
#centerpane {
маржа: авто;
ширина: 80%;
}
Тада!
Я хочу, чтобы содержимое страницы всегда заполняло окно и меняло размер при изменении размера окна
Спасибо за все предложения! Похоже, уродливые вещи, которые я должен был сделать, были необходимы. Следующее работает (по крайней мере, на моей машине) в IE и FireFox. Возможно, позже я напишу об этом статью для CodeProject.com ;-)
Этот javascript находится в разделе <head>:
<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> начинается так:
<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>
DIV перемещаются влево для макета. Мне пришлось установить высоту и ширину в процентах, которые немного меньше полной суммы (например, 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;
}
уродливо, но это работает - и я думаю, это действительно важно ;-)
используйте ems. jontangerine.com и simplebits.com - прекрасные примеры. Дополнительная литература - Невероятные макеты Em и эластичные макеты с CSS от Джона Тана
спасибо, энди! В конечном итоге я использовал em для шрифтов в этом проекте после расчета размеров шрифта в пикселях в предыдущем проекте [который работал, но не очень хорошо!]
<body onresize = "resizeWindow ()" onload = "resizeWindow ()"> СТРАНИЦА </ body>
/**** Page Rescaling Function ****/
function resizeWindow()
{
var windowHeight = getWindowHeight();
var windowWidth = getWindowWidth();
document.getElementById("content").style.height = (windowHeight - 4) + "px";
}
function getWindowHeight()
{
var windowHeight=0;
if (typeof(window.innerHeight)=='number')
{
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight)
{
windowHeight = document.documentElement.clientHeight;
}
else
{
if (document.body && document.body.clientHeight)
{
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
Решение, над которым я сейчас работаю, требует нескольких изменений ширины, иначе высота пока работает нормально ^^
-Озаки
в каком смысле "масштаб"? Вы говорите о том, чтобы растянуть макет по размеру или вы также хотите увеличить размер шрифта / размеры изображения?