Question

如何在页面上进行自动缩放取决于浏览器的宽度/高度，如firefox的ctr + -

我试过css3比例，它打破了页面上的一些部分（某些部分是固定位置）我也试过javascript，很多jQuery插件没有运气

任何想法如何制作它？

PS：我尝试过浏览器变焦，非常适合

感谢

Answer 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>

在页面上自动缩放取决于浏览器的宽度/高度，如firefox做ctr + -

1 个答案: