html 等比缩放页面

最新推荐文章于 2026-04-22 05:04:41 发布

原创

最新推荐文章于 2026-04-22 05:04:41 发布 · 9.5k 阅读

标签

#等比缩放 #html #transform scale #transform #scale

收录于

根据浏览器窗口等比缩放页面

实现思路

通过css的transform scale属性对页面body元素进行缩放
缩放比例为实际窗口尺寸/设置的body像素尺寸，选择(窗口宽/body宽)和(窗口高/body高)中较小的一个
body缩放之后，位置相对于窗口出现偏移，许需要调整body的margin

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>等比缩放</title>
    <style type="text/css">
        html {
    
    
            background: #757575
        }

        body {
    
    
            margin: 0;
            background: #a8a8a8;
        }