如何根据浏览器窗口的大小使网页可缩放？

我刚刚做了我的第一个website，我注意到，如果浏览器窗口太小，元素开始看起来很奇怪并且聚集在一起。我想知道如何使元素可扩展如何根据浏览器窗口的大小使网页可缩放？

相关HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Andrew Louis, University of Toronto</title> 
    <link rel="stylesheet" href="fonts/stylesheet.css" type="text/css" /> 
    <link rel="stylesheet" href="style.css" type="text/css" /> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script src="javascript/jqueryscript.js"></script> 
    <script src="javascript/popup.js"></script> 
    <script language="JavaScript"> 
     var i = 0; 

     imageObj = new Image(); 

     images = new Array(); 

     images[0] = "images/book-black.png"; 
     images[1] = "images/male-black.png"; 
     images[2] = "images/telephone-black.png"; 

     //Start preloading 
     for (i = 0; i<=2; i++) 
     { 
      imageObj.src=images[i]; 
     } 
    </script> 
<body> 

     <div id="heading"> 
      <span class="border">Andrew Louis</span> 
      <div id = "subheading"> 
      <p> <br /><b>Andrew</b> is a big fan of grandiose ideas that propel change, imaginative software,<br /> innovative web design, and caffè americanos.</p> 
      </div> 
     </div> 

     <!-- <div id="footer">  --> 
      <div class="nav_wrapper"> 
       <ul class = "Fade" id="list_orientation">    
        <li id="about"><a href="AboutMe.html"><img src = "images/male.png" height = '50' width = '50' /></a></li> 
        <li id="port"><a href="Portfolio.html"><img src = "images/book.png" height = '50' width = '50' /></a></li> 
        <li id="contact"><a href="Contact.html"><img src = "images/telephone.png" height = '50' width = '50' /></a></li> 
       </ul> 


      </div> 
     <!-- </div> --> 



</body> 
</html>

相关CSS：

.Chunk{ 
    font-family:'ChunkFiveRomanRegular'; 
} 

.Museo{ 
    font-family:'MuseoSlab500Regular'; 
    font-size:20px; 
} 


.nav_wrapper { 
    position:fixed; 
    color:#000; 
    left: -100px; 
    right: 0px; 
    bottom: 0px; 
    text-align:center; 
    height:225px; 
    /*background:white; 
    border-style:dotted;*/ 
} 

.global_nav{ 
    position:fixed; 
    float:bottom; 
    padding:5px; 
    color:#000; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    text-align:center; 
    height:17px; 
    font-size:10px; 
    background:white; 
} 

#portfolio_text{ 
    text-align:center; 
} 

#heading{ 
    font-family:'Lobster1.3Regular'; 
    color:#D04D21; 
    position: absolute; 
    font-size:80px; 
    top: 10%; 
    left: 0px; 
    width: 100%; 
    height: 1px; 
    text-align:center; 
    text-shadow: 0 0 2px rgba(0,0,0,0.9); 
} 

.border{ 
    border-top: 1px solid #D04D21;/*#000000;*/ 
    border-bottom:1px solid #D04D21;/*#000000;*/ 
    padding:20px; 
} 

.rounded_border{ 
    border:2px dashed; 
    padding:10px 40px; 
    border-radius:25px; 
} 

body{ 
background:#FFFFFF; 
} 

#subheading{ 
    font-family:'MuseoSlab500Regular'; 
    text-align:center; 
    font-size:25px; 
    text-shadow: 0 0 1px rgba(0,0,0,0.1); 
} 


#list_orientation li a { 
    text-decoration:none; 
    text-align:center; 
    color:black; 

} 
#list_orientation li{ 
    display:inline-block; 
    padding:50px; 
    height:50px;width:50px; 
    text-align:center; 
    width:20%; 
    margin-left:3%; 
} 


.Fade img{ 
    border-style:dotted; 
    /* opacity:0.4; 
    padding:10px; 
    padding-bottom:20px;*/ 
    background:white; 
    border-color:#D04D21; 


    padding: 2em 2em 2em 2em; 
    -moz-border-radius: 5em; 
    -webkit-border-radius: 5em; 
    border-radius: 5em; 
} 

.Fade img:hover{ 
    background:#D04D21; 
    border-color:white; 
} 

#pup { 
    position:absolute; 
    z-index:200; /* aaaalways on top*/ 
    text-align:center; 
    font-family:'ChunkFiveRomanRegular'; 
    padding: 3px; 
    margin-left: 10px; 
    margin-top: -5px; 
    width: 120px; 
    border: 1px solid black; 
    background-color:white; 
    color: #D04D21; 
    opacity:0.9; 
    font-size: 1em;/*0.95em;*/ 
} 

.Entypo{ 
    font-family:'EntypoRegular'; 
    font-size:100px; 
} 


a{ 
text-decoration:none; 
color:#D04D21; 
}

来源

2012-06-25 Louis93

这取决于您要创建的效果有很大的差异。

最简单的方法是设置身体的最小高度和最小宽度（或新的顶级div）并让用户在较小的浏览器窗口中滚动。

你会想出大多数解决方案可能会涉及到各种元素的最小高度和最小宽度！

然而，一个'更好的'解决方案是避免位置：绝对的或固定的。这些不能很好地扩展。尝试在div上使用填充和边距来获得所需的效果。

来源

2012-06-25 21:01:34 jaypeagi

其实，我刚刚开始工作...寻找一个稍微干净的解决方案，因为页面必须刷新以查看固定视图。你有什么想法如何解决这个问题？ – Louis93

修改javascript以刷新页面，如果窗口调整大小，但这种方法是我发现的唯一一个工作。 – Louis93

使用CSS缩放和等效的Firefox。（-moz-transform：scale（xx）），使用jquery

CSS缩放可以在IE和Chrome上运行。

的DOM被加载后，

var zoomRatio = $(window).width()/1024; 
//if your site is fixed at 1024 px for example 

$(document).ready(function(){ 

$(html).css("zoom",zoomRatio); 

});

这不是非常好支持，但它的工作。这是我目前使用的。

来源

2012-06-25 21:11:17 AbSoLution8

似乎不工作:( – Louis93

如何根据浏览器窗口的大小使网页可缩放？

回答

相关问题