所有浏览器的屏幕分辨率

时间:2014-04-12 07:41:23

标签: php html css

我想在所有浏览器中都有相同的屏幕分辨率(页面应该居中),我已经检查过这与身体宽度有关,但不知怎的,我仍然有困难。任何帮助,将不胜感激。感谢您的网站: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;
}

1 个答案:

答案 0 :(得分:0)

您可以使用媒体更改不同屏幕尺寸的div 在开始时使用普通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 {  }
}

然后你会将你的CSS粘贴到媒体部分,并将其更改为使用不同的屏幕分辨率。


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

}

适用于iphone 5(c / s)