Question

如何使页面上的自动缩放取决于浏览器宽度/高度, 如 Firefox does ctr+-

i tried css3 scale, and it broke some parts on the page (some parts are fixed position) i tried also javascript, many jQuery plugins with no luck

任何想法如何做到这一点?

PS: I 尝试过浏览器缩放, 并且完全合适

感谢谢谢

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>

Answer 2

尝试 cs \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\可以\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\可以\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

body {
    zoom: 0;
}
@media screen and (max-width: 600px) {
    body{
        zoom: 40%;
    }
}

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/zoom

友情链接