Масштабирование или адаптивный WEB дизайн - Помощь студентам

Saratov64 · 10.03.2016, 14:34

и снова про масштабированшие
уровень знаний 10 дней от роду, чтения ОКЕАНА, html, css, javasripts.
задача масштабировать, адаптировать под разные размеры экрана, пытался прикрутить из темы с этого сайта но не получилось http://www.programmersforum.ru/showt...=250318&page=2
все разъезжается.
джава скрипт взял чужой
добвалю, что хотелось бы при уменьшении размера окна плавное масштабирование всех элементов и всех DIV блоков, и всего текста, у меня же почему-то ресайз идет, только Хэдера, навигейшен и меню, остальные как деревянные, и разъезжаются. Тема тут была, но в моем случае нужна все же индивидуальная помощь, спасибо за понимание, пока параллельно читаю учебник css, не ругайте ))

index.html

<html>

Код HTML:

<head>
 <title>Мой сссайт</title>
 
<link rel="stylesheet" type="text/css" href="="red"]style.css" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script src="java.js" type="text/javascript"></script>
</head>
<body>

<div id="container">				 
						 
						 
<div id="header">
</div>

<div id="navigation" >
</div>
						 
<div id="menu">
								 
<a href=""><img class="scaled" src="images/bt1.png" alt="" width="165" height="51" border="0" onmouseover="this.src='images/bt1_1.png'; this.width=165;this.height=51;" onmouseout="this.src='images/bt1.png'; this.width=165;this.height=51;"> </a>
<br>
.....
2
3
и т.д кнопки
</div>

<div id="content"> общий блок для всех блоков входящих в него
				
<div id="centr">
текст							
</div>

<div id="links">

<h1>ОФИЦИАЛЬНЫЕ САЙТЫ</h1>
						
</div>
								
<div id="links2">
<h1>СИСТЕМЫ И КОМПЛЕКСЫ</h1>
</div>
							
<div id="clear">
						 
</div>

<div id="footer">
</div>
						
         </div>
</body> 
</html>

style.css

Код:

html, body{
	background: #CCCCCC;
	color: #4F4134;
	font-family: Trebuchet MS, Arial, Times New Roman;         
	text-align:center;
			
}
 H1 {font-size: 1.3em;}
 H2 {
	 font-size: 1.2em;
	 font-weight: bold;
	 }
	 
H3 {
	
	 font-size: 1em;
	 font-weight: bold;
	 /*color: #000000;*/
	 line-height: 1.2em;
	 }
 p {
	 font-size: 1em; line-height:1.2em;
		
 }
 
 H4 {
	font-size: 14px;
	 font-weight: bold;
	 color: #000000; 
 }
 

a:link {text-decoration:none;} /* непосещенная ссылка */ 
a:link {color:#594C40;} /* непосещенная ссылка */ 
a:visited {color:#594C40;} /* посещенная ссылка */
a:hover {color:#EC7558;} /* курсор мыши над ссылкой */
a:active {color:#C4AE8F;} /* выбранная ссылка */ 	 

 
#container{
		background: url(images/web5.png) no-repeat center center fixed; 
		background-size: 100% 100%;
		width: 100%;
		height: auto;
		margin:0 auto;  /* сайт располагается по центру экрана */ 
		
}

img.scaled{
	
	width: 10em;
	height: auto;
	text-align: center;	
}

#header {
	
/*background: #ffffff;*/
 height: 10em;
 width: auto;
 margin:0 auto;
 border: 1px solid black;
}

#navigation{
	
	/*background: #ffffff;*/
 width: auto;
 height: 1em;
 margin:0 auto;
  border: 1px solid black;
}

#menu{
	/*background: #ffffff;*/
 float: left;
 width: 20%;
 height: auto;
 text-align: centr;
 line-height:5px;
 border: 1px solid black;
 
}

#centr{
	/*background: #ffffff;*/
	float: left;
	width: 59%;
	height: auto;
	margin: 0px 0px 0px 0px;
	text-align: left;
	line-height:10px;
	padding-top: 0.5 em;
	border: 1px solid black;
}

#content {
/*background: #ffffff;*/	
 float: right;
 width: 20%;
 height: auto;
 text-align: left;
 padding-top: 0.5 em;
 line-height:1.1em;
 border: 1px solid black;
margin: 0px 0px 0px 0px; 
 
 }

 #links {
	/*background: #ffffff;*/
	float: left;
	width: 29%;
 height: auto;
 text-align: centr;
 /*line-height:10px;*/
 /*Padding-top: 10px;*/
 border: 1px solid black;

}

#links2 {
	/*background: #ffffff;*/
	float: left;
	margin: o auto; 
 width: 30%;
 height: auto;
 text-align: centr;
 /*line-height:10px;*/
  /*Padding-top: 10px;*/
  border: 1px solid black;
}

#clear {
		clear:both;
 }

#footer {
	/*background: #ffffff;*/
 height: 5em;
 width: auto;
  margin:0 auto;
  border: 1px solid black;
}

java.js

Код HTML:

[COLOR="blue"]/*alert ('PODKLUCHEN!')*/
var docWidth, docHeight, docRatio, div = document.getElementsByTagName('div')[0];

onresize = function()
{
    docWidth = document.documentElement.clientWidth;
    docHeight = document.documentElement.clientHeight;
   

    docRatio = docWidth / docHeight;
   

    fullScreenProportionalElem(wrapper, 1600, 900); 
    resizeFont(wrapper, 1600, 900, 15); 
    
}

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';
        
    }
}

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';
    
}

onresize();[/COLOR]

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
web-дизайн	Dimarik	HTML и CSS	2	06.09.2010 15:31