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

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

html css

Html 如何根据浏览器窗口的大小使我的网页可缩放？,html,css,Html,Css,我刚做了第一个，我注意到如果浏览器窗口太小或太小，元素开始看起来很奇怪并聚集在一起。我想知道如何使这些元素具有可伸缩性相关HTML： <!DOCTYPE html> <html> <head> <title>Andrew Louis, University of Toronto</title> <link rel="stylesheet" href="fonts/stylesheet.css" type="tex

我刚做了第一个，我注意到如果浏览器窗口太小或太小，元素开始看起来很奇怪并聚集在一起。我想知道如何使这些元素具有可伸缩性

相关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>

根据要创建的效果，这可能会有很大的不同

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

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

然而，“更好”的解决方案是避免立场：绝对或固定。这些不能很好地扩展。尝试在div上使用padding和margin来获得想要的效果。

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

});

这并没有得到很好的支持，但它确实起到了作用。这就是我目前正在使用的。

事实上，我刚刚让它开始工作……正在寻找一个稍微干净的解决方案，因为页面必须刷新才能看到固定视图。你对如何解决这个问题有什么想法吗？修改javascript以在调整窗口大小时刷新页面，但我发现这个方法是唯一有效的。

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

$(document).ready(function(){

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

});