0

我刚刚创建了我的第一个网站，我注意到如果浏览器窗口变得太小，这些元素开始看起来很奇怪并且聚集在一起。我想知道如何使元素可扩展

相关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;
}
4

2 回答 2

1

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

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

您将提出的大多数解决方案可能都涉及处理各种元素的这些最小高度和最小宽度！

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

于 2012-06-25T21:01:34.903 回答
1

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

});

这没有得到很好的支持，但它可以完成工作。这就是我目前正在使用的。

于 2012-06-25T21:11:17.730 回答