Моя разметка страницы
Однако упорно не получается запускать код на форуме. В чём его опасность.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
var r=document.all;
function razm(){
var hi=parseInt(r.vid.clientWidth);
var hei=parseInt(r.vid.clientHeight);
if (hi>=hei){
r.vod.style.left=0;
r.vod.style.width=hi+'px';
r.vod.style.height=hi/1.5+'px';
r.vod.style.top=(hei/2-hi/3)+'px';
var ho=parseInt(r.vod.style.height);
if(ho>=hei){
r.vod.style.height=hei+'px';
r.vod.style.width=(hei*1.5)+'px';
r.vod.style.top=0+'px';
r.vod.style.left=((hi-(hei*1.5))/2)+'px';}
r.vyd.style.top=0;
var ha=parseInt(r.vod.style.width);
r.vad.style.width=ha/1.5+'px';
r.vad.style.height=ha/1.5+'px';
r.vad.style.left=0;
r.vyd.style.width=ha/3+'px';
r.vyd.style.height=ha/1.5+'px';
r.vyd.style.left=ha/1.5+'px';
r.lst.style.top=ha/3+'px';
r.lst.style.left=0;
}else{
r.vod.style.top=0;
r.vod.style.height=hei+'px';
r.vod.style.width=hei/1.5+'px';
r.vod.style.left=(hi/2-hei/3)+'px';
var hia=parseInt(r.vod.style.width)
if(hia>=hi){
r.vod.style.width=hi+'px';
r.vod.style.height=(hi*1.5)+'px';
r.vod.style.left=0;
r.vod.style.top=((hei-(hi*1.5))/2)+'px';
}
var hio=parseInt(r.vod.style.height)
r.vad.style.width=hio/1.5+'px';
r.vad.style.height=hio/1.5+'px';
r.vad.style.left=0;
r.vyd.style.width=hio/1.5+'px';
r.vyd.style.height=hio/3+'px';
r.vyd.style.left=0;
r.vyd.style.top=hio/1.5+'px';
r.lst.style.top=0;
r.lst.style.left=hio/3+'px';
}
iz=parseInt(r.vad.style.width);
r.zag.style.width=iz/2+'px';
r.zag.style.height=iz/2+'px';
r.zag.style.left=0;
r.lst.style.width=iz/2+'px';
r.lst.style.height=iz/2+'px';
r.vad.style.fontSize=iz/10+'pt';
r.zag.style.fontSize=iz/30+'pt';
r.lst.style.fontSize=iz/60+'pt';
}
</script>
<style>
#vid {position:absolute;
top:0;
left:0;
height:100%;
width:100%;
margin: 0;
overflow: hidden;
text-align: center
}
#vod{background: rgb(200,200,255);
position: absolute;
margin: 0;
overflow: hidden;
}
#vad{background: rgb(255,200,200);
position: absolute;
margin: 0;
overflow: visible;
}
#vyd{
position: absolute;
background: rgb(187,219,206);
color:rgb(0,0,0);
}
#zag{
position: absolute;
border-color:#ffff00;
border-style:solid;
border-width:1px;
}
#lst{background: rgb(100,200,0);
position: absolute;
border-color:#ffff00;
border-style:solid;
border-width:1px;
}
</style>
</head>
<body onload='razm()'onresize='razm()' onmousemove="getMouseCoords(event)">
<div id="vid" >
<div id="vod" >
<div id="vad" >ОСНОВНОЕ ПОЛЕ<br>Для видео или для полотна canvas</div>
<div id="vyd" >
<div id="zag" >Первое служебное<br> поле</div>
<div id="lst" >Второе служебное поле</div>
</div>
</div>
</div>
</body>
|
С десятой попытки получилось. С такой разметкой я месяца три назад сделал РИСОВАЛКА и ПАЗЛ-МУЛЬТЫ, ссылки размещал везде где смог, и в сообщениях друзьям в контакте. Но ставят лайки и пишут в ответ о НЕСКЛАДУШКАХ. Никто не подтвердил, что это работает не только на моём компьютере и моём смартфоне. Так же и на форуме, молчание.
|
Вероятно нужно описать смысл и работу этого кода.
Страница имеет размер с соотношением сторон 3:2. Разбита на три квадрата. При вертикальном положении экрана на смартфоне или сузить окно на компьютере большой квадрат(vad) будет сверху два маленьких снизу (zag,lst). При горизонтальном большой справа маленькие квадраты слева один над другим. Удобно на смартфоне размер полей не меняется от поворота экрана. Размер текста в каждом квадрате привязан к размеру большого квадрата. r.vad.style.fontSize=iz/10+'pt'; r.zag.style.fontSize=iz/30+'pt'; r.lst.style.fontSize=iz/60+'pt'; Это так в этом коде, несложно сделать чтобы пользователь управлял размером шрифта. |
| Часовой пояс GMT +3, время: 21:44. |