Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг: Рейтинг темы: голосов - 15, средняя оценка - 4.60
joundlevel
0 / 0 / 2
Регистрация: 05.12.2013
Сообщений: 39
#1

Масштабируемый div в соответствии с пропорциями экрана - HTML, CSS

06.04.2014, 20:57. Просмотров 2810. Ответов 3
Метки нет (Все метки)

Ребят,помогите,пожалуйста,хотел воспользоваться вот этой статьёй-http://habrahabr.ru/post/187406/ . Всё скопировал,поставил в HTML код, но ничего не работает,в чём ошибка,может я что-то не так переписал?
Вот код-
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html>
<head>
<title>NEW</title>
    <meta charset="utf-8">
 
<style>
body {
    overflow: hidden;
}
 
div {
    font-size: 150px;
    position: absolute;
    font-family: Arial;
    color: #fff;
    background: #5aa348;
width: 1320px;
height: 650px;
}
</style>
 
<script type="text/javascript">
 
var docWidth, docHeight, docRatio, div = document.getElementsByTagName('div')[0];
 
onresize = function()
{
    docWidth = document.documentElement.clientWidth;
    docHeight = document.documentElement.clientHeight;
    // ширина и высота вьюпорта
 
    docRatio = docWidth / docHeight;
    // соотношение сторон вьюпорта
 
    fullScreenProportionalElem(div, 1920, 1080); // элемент, ширина, высота
    resizeFont(div, 1920, 1080, 200); // элемент, ширина, высота, размер шрифта
    // размер шрифта зависит от выставленной ширины и высоты
}
 
function fullScreenProportionalElem(elem, width, height)
{
    var ratio = width / height;
    // соотношение сторон элемента
 
    if (docRatio < ratio)
    {
        elem.style.width = docWidth + 'px';
        elem.style.height = Math.round(docWidth / ratio) + 'px';
        elem.style.top = Math.round(docHeight / 2 - elem.offsetHeight / 2) + 'px';
        elem.style.left = '0px';
        // высота вьюпорта больше чем высота элемента
        // ширину элемента приравниваем к ширине вьюпорта, высоту вычисляем
        // центрируем элемент по высоте
    }
    else if (docRatio > ratio)
    {
        elem.style.width = Math.round(docHeight * ratio) + 'px';
        elem.style.height = docHeight + 'px';
        elem.style.top = '0px';
        elem.style.left = Math.round(docWidth / 2 - elem.offsetWidth / 2) + 'px';
        // ширина вьюпорта больше чем ширина элемента
        // высоту элемента приравниваем к высоте вьюпорта, ширину вычисляем
        // центрируем элемент по ширине
    }
    else
    {
        elem.style.width = docWidth + 'px';
        elem.style.height = docHeight + 'px';
        elem.style.top = '0px';
        elem.style.left = '0px';
        // соотношение сторон вьюпорта равно соотношению сторон элемента
        // приравниваем стороны элемента к сторонам вьюпорта
        // обнуляем значения top и left
    }
}
 
function resizeFont(elem, width, height, size)
{
    var ratio = width / height;
    // соотношение сторон элемента
    
    if (docRatio < ratio) elem.style.fontSize = height * size / 14062 + 'vw';
    else if (docRatio > ratio) elem.style.fontSize = width * size / 14062 + 'vh';
    // число 14062 можно менять и подстраивать под себя, будет меняться размер шрифта
}
 
onresize();
// вызываем функцию
</script>
 
    </head>
 
<body>
 
<center><div>Текст</div></center>
 
</body>
</html>
Спасибо!

Добавлено через 6 часов 46 минут
Помогите,пожалуйста
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
06.04.2014, 20:57
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Масштабируемый div в соответствии с пропорциями экрана (HTML, CSS):

Div распологаются не в соответствии со своими z-index
Пытаюсь сделать так, что бы див с классом - &quot;lamel&quot; располагался над дивом c...

Блок с пропорциями 16:9
Добрый день. Как в css правильно задать div-блоку свойства таким образом, чтобы...

Div на всю ширину экрана
простейшая казалось бы задачка. однако если указывать width 100% он не...

Основной Div по центру экрана
Добрый вечер. Я только начинаю работать с версткой сайтов, поэтому извиняюсь,...

Выровнять содержимое div по середине экрана
У меня есть Div с картиками и текстом и мне надо выровнять содержимое div а по...

Как сделать div на 100% экрана
Здравствуйте, уважаемые обитатели форума. Столкнулся с такой проблемой: мне...

3
Taatshi
Администратор
11535 / 5032 / 256
Регистрация: 05.04.2011
Сообщений: 13,768
Записей в блоге: 2
06.04.2014, 21:11 #2
Лучший ответ Сообщение было отмечено joundlevel как решение

Решение

joundlevel, вставьте скрипт ПОСЛЕ блока div, который он должен обрабатывать. В скрипте нет условия начала работы после полной загрузки страницы. Он пытается масштабировать див, которого еще нет в природе.

В консоли ошибка

Код
TypeError: elem is undefined
elem.style.width = Math.round(docHeight * ratio) + 'px';
То есть он не может получить размеры блока, и, соответственно, дальше все идет прахом..

Думаю, так...
0
joundlevel
0 / 0 / 2
Регистрация: 05.12.2013
Сообщений: 39
07.04.2014, 00:46  [ТС] #3
Спасибо Вам огромное,за помощь!!!

Добавлено через 32 минуты
А можно ли этот javaskript применить ко всей странице?

Добавлено через 2 часа 25 минут
Можно ли как то вообще сделать,на мотив этого скрипта,чтобы весь сайт не зависимо от размера экрана был на веcь экран?
0
Taatshi
Администратор
11535 / 5032 / 256
Регистрация: 05.04.2011
Сообщений: 13,768
Записей в блоге: 2
07.04.2014, 01:08 #4
joundlevel, можно. Но там одним скриптом не обойдешься. Это целый мануал писать нужно. Что погуглить

1) Размер шрифта в зависимости от разрешения экрана
2) Скрипт на JQuery (для поддержки старых браузеров) для бэкграунда методом cover на всю площадь блока
3) Размер картинок в зависимости от размеров содержащего их блока.

Я такое успешно делала. Пример можно посмотреть тут - пока он еще живой)

Отступы (маргины и паддинги) по ширине - в процентах, по высоте - в em
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
07.04.2014, 01:08
Привет! Вот еще темы с решениями:

Div'ы и авторегулировка под размер экрана
Всем привет Хочу сделать так что бы при изменении разрешения экрана или если...

Расположение объекта div в зависимости от размера экрана
Подскажите, пожалуйста, возможно ли в html прописать алгоритм, по которому...

Движущийся div без изменения ширины экрана
Скажите пожалуйста, у меня на страничке блок div. При наведении на него мышки...

Выравнивание img в блоке div по ширине экрана
Так есть блок в нём три картинки и необходимо что бы они располагались на...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru