1

我如何在页面上进行自动缩放取决于浏览器的宽度/高度，就像 Firefox 那样 ctr+-

我尝试了 css3 缩放，它破坏了页面上的某些部分（某些部分是固定位置）我还尝试了 javascript，许多 jQuery 插件都没有运气

知道怎么做吗？

PS：我尝试了浏览器缩放，它非常适合

谢谢

4

1 回答 1

1

尝试这个。根据需要添加尽可能多的媒体查询。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>
<style type="text/css">
    body{
        color: #666;
        background: #ccc;
        font-family: Arial;
        font-size: 62.5%;
        -moz-transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        transform-origin: 0 0;
    }
    #page{
        width: 600px;
        background: #fff;
        padding: 20px;
    }
    @media screen and (min-width: 800px){
        body{
            -moz-transform: scale(1.2, 1.2);
            -webkit-transform: scale(1.2, 1.2);
            -ms-transform: scale(1.2, 1.2);
            -o-transform: scale(1.2, 1.2);
            transform: scale(1.2, 1.2);
        }
    }
    @media screen and (min-width: 1000px){
        body{
            -moz-transform: scale(1.4, 1.4);
            -webkit-transform: scale(1.2, 1.4);
            -ms-transform: scale(1.4, 1.4);
            -o-transform: scale(1.4, 1.4);
            transform: scale(1.4, 1.4);
        }
    }
</style>
</head>
<body>
<div id="page">
    <h1>Test</h1>
    <h2>Test 2</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut magna tortor, ut feugiat nunc. Aenean blandit imperdiet sem et interdum. Proin adipiscing metus ac sapien dictum sed fringilla odio tincidunt. Morbi tempus nulla ut dolor lacinia fringilla. Praesent ut lorem vel nisi hendrerit bibendum id at velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae metus sed nunc accumsan rutrum et ac magna. Vestibulum blandit nibh sed elit convallis in feugiat augue sollicitudin. Praesent orci felis, pharetra sed laoreet vehicula, tincidunt at mauris. Ut sed vehicula mi. 
    </p>
</div>
</body>
</html>
于 2012-06-20T13:23:13.120 回答