2014-04-12 4 views
0

모든 브라우저에서 동일한 화면 해상도를 사용하고 싶습니다. (페이지를 중앙에 배치해야합니다.) 몸통의 너비와 관련이 있는지 확인했지만 어떻게 든 어려움이 있습니다. 어떤 도움을 주시면 감사하겠습니다. 당신의 웹 사이트를 감사 : http://worldexplore.eu/worldmap/main.php모든 브라우저의 화면 해상도

main.php :

<header> 
    <div id='outer'> 
     <div id='second'>  
      <iframe id='city' name='sx' scrolling='no' width='1270px' height='70px' frameborder='0' src='search.php'></iframe> 
      </div> 

    </div> 

      <div id='third'> 
      <iframe id='result' name='result' scrolling='yes' width='530px' height='700px' frameborder='0' src='list.php'></iframe> 
      </div> 


      <div id='inner'> 
      <div id='four'> 
       <iframe id='details' name='details' scrolling='no' width='730px' height='700px' frameborder='0' ></iframe> 
      </div> 

CSS :

body  
{ 
background : url(../menu/background.jpg) no-repeat; 
width: 100%; 
height: 100%; 
margin: 0px auto; 
padding: 0px; 
font-family: sans-serif; 
background-color:#0C1D63; 
} 

div#outer { 
position: absolute; 
background-color:#F0F0F0; 
top:15px; 
left:5px; 
border-width:0px; 
box-shadow: 8px 6px 6px #000; 
border-radius:25px; 
width: 1260px; 
height: 65px; 
} 

div#inner { 
position: absolute; 
top:5px; 
left:535px; 
height: 830px; 
margin: 0px auto; 
} 

div#second { 
position: absolute; 
height:70px; 
left:5px; 
background-color: transparent; 
} 

div#third { 
position: absolute; 
left: 0px; 
background-color: transparent; 
top: 100px; 
height: 600px; 
}  

div#four { 
position: absolute; 
background-color: transparent; 
top:95px; 
left:0px; 
border-radius:25px; 
}  

div#bottom { 
position: absolute; 
background-color:transparent; 
font-family: tahoma; 
font-size:.7em; 
bottom:-50px; 
width: 740px; 
color: #F0F0F0; 
} 

답변

0

당신은 다른 화면의 div의이 가 시작 정상적인 사업부를 가지고 크기를 변경하는 미디어를 사용할 수있는, 미디어 쿼리를 시작합니다.

#div { } 
@media screen and (min-width: 1366px) { 
    #div { } 
} 
@media screen and (min-width: 1440px) { 
    #div { } 
} 
@media screen and (min-width: 1600px) { 
    #div { } 
} 
@media screen and (min-width: 1920px) { 
    #div { } 
} 

A 그런 다음 미디어 섹션에 CSS를 붙여넣고 다른 화면 해상도로 작동하도록 변경하십시오.


@media screen and (min-width: 640px) and (max-width: 1136px) { 

} 

아이폰 5 (c/s)

위한 것