Question

我刚刚制作了我的第一个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;
}

Answer 1

根据您想要创建的效果，这可能会有很大差异。

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

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

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

Answer 2

使用css zoom和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);

});

这不是非常好的支持，但它完成了这项工作。这就是我目前正在使用的。

如何根据浏览器窗口的大小使我的网页可扩展？

2 个答案: