可通过CSS transform缩放、调整宽高、viewport元标签、rem单位动态缩放、容器查询五种方法实现HTML元素或页面视觉缩小，各法适用场景不同且互不依赖。
如果您希望调整HTML页面或其中某个元素的显示尺寸，可以通过多种CSS技术实现视觉上的缩小效果。以下是几种常用且互不依赖的方法：
该方法通过CSS的transform: scale()函数对元素进行等比缩放，不改变文档流布局，仅影响渲染效果。
1、在目标元素的style属性中添加transform: scale(0.8);，其中0.8表示缩小为原尺寸的80%。
2、为确保缩放后内容清晰，可同时设置transform-origin: top left;指定缩放基点。
立即学习“前端免费学习笔记（深入）”；
3、若需兼容旧版浏览器，补充-webkit-transform: scale(0.8);和-ms-transform: scale(0.8);。
此方式直接修改元素盒模型的尺寸参数，适用于需要真实占用空间变小的场景。
1、为块级元素设置width: 60%; height: 40px;，使其宽度为父容器的60%，高度固定为40像素。
2、添加max-width: 300px;和max-height: 200px;防止在大屏幕下过度拉伸。
3、对图片等替换元素，可单独设置width: 100%; height: auto;保持宽高比，再结合父容器尺寸控制整体缩放。
该方法作用于整个HTML页面视口，常用于适配不同DPI设备或强制统一缩放比例。
1、在HTML文档的
内插入。2、其中initial-scale=0.75表示页面初始加载时以75%比例渲染。
3、注意：此方式会影响所有内容交互区域大小，可能导致点击热区过小。
通过动态修改根元素字体大小，间接控制所有使用rem单位的元素尺寸，适合全局响应式缩放。
1、在CSS中定义html { font-size: 14px; }，并将各元素尺寸设为rem单位，如font-size: 1.2rem; width: 20rem;。
2、通过JavaScript执行document.documentElement.style.fontSize = '10px';，使所有rem基准缩小约28.6%。
3、该操作实时生效且无需重排布局，但要求全站统一采用rem单位。
当元素被包裹在具有container属性的祖先中时，可通过容器查询根据其可用宽度动态调整内部元素尺寸。
1、为父容器添加style="container-type: inline-size; container-name: card;"。
2、在CSS中编写@container card (width
3、需确保浏览器支持container-type属性（Chrome 105+、Firefox 119+、Safari 16.4+）。
以上就是html如何缩小_缩小HTML页面或元素尺寸【尺寸】的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
563
收藏
取消收藏
