Zoom页面缩放

2025-05-19 00:19:14首发，1周前更新

通过num-step和fs-root变量增大或减小页面的字号、行高、边距的大小

前言

在方块字中（日文、中文、韩文等），12px是最小可见的字号，通常用于可忽视的文本部分，14是最小的正文字号，16px和18px通常是小标题字号；在拉丁字块中（英文、法文、德文等），字号普遍需要比方块字大2px，所以2px应该页面字号缩小或放大的一个基本步进值。

另外，css中的单位主要分两种，一种是相对单位（包括rem、em、vw等），一种是固定单位（px）。在本框架设计当中，对于一些仅仅是提示性的文本或者不需要放大处理的组件模块采用固定的px单位，边框也采用px单位。

采用px作为单位的组件或模块主要包括：

valid校验模块
message信息提示模块
flag组件
comment评论组件
callout通知模块

本框架通过修改--_num-step变量和:root.font-size属性，来改变页面整体大小，这不是简单的缩放，而是从根本上修改字号、行高、边距、尺寸等。

以下列举使用px单位的组件和模块

中国的原始社会，起自大约170万年前的元谋人

宋健

1楼

总体上说，对得起五大流氓的身份，个人认为综合实力能排第二。具体到小的方面，全球国家总数200个左右，中国各方面大部分都能在世界前5，前2的也不少。

10小时前广东

num-step变量

--_num-step变变量在全局范围内有效。默认值为0，即正文为14px（1.4rem），如果设为2，那么页面整体的字号、行高等数值均会+2，此时正文将变成16px（1.6rem），也是拉丁语最适合阅读的正文字号。

由于移动端屏幕较小，字号不宜特别大，所以在使用num-step变量时，可以考虑仅仅针对桌面端生效。

以下是通过css覆盖的写法：

                      
                        //所有终端生效
                        :root {
                            --_num-step:2;
                        }
                        //仅在桌面端生效
                        @media (hover:hover) {
                            :root {
                                --_num-step:2;
                            }
                        }

当然我们可以通过JavaScript方法，通过点击按钮增加或减少该变量的值以实现页面缩放效果。

输出
HTML
JS

```
                
                
            
```

                
                stepdec.onclick = ()=>{
                    let styles = ax.style(document.documentElement),
                        value = parseFloat(styles.getPropertyValue('--_num-step')) || 0;
                    value -= 2;
                    document.documentElement.style.setProperty('--_num-step', Math.max(value,0));
                }
                stepinc.onclick = ()=>{
                    let styles = ax.style(document.documentElement),
                        value = parseFloat(styles.getPropertyValue('--_num-step')) || 0;
                    value += 2;
                    document.documentElement.style.setProperty('--_num-step', Math.max(value,0));
                }
                stepback.onclick = ()=>{
                    document.documentElement.style.setProperty('--_num-step', 0);
                }

fs-root变量

本框架以rem单位为主单位，通过控制html标签的font-size属性以改变整体尺寸，该属性默认值是var(--_fs-root)，通过修改该变量以改变页面整体尺寸。但是对使用px单位的属性无效，比如边框、callout组件等。

当font-size=10px时，正文字号为14px；当font-size=11.43px时（16/1.4），正文字号为16px。

以下是通过css覆盖的写法，使用font-size或--_fs-root变量均可：

                      
                        //所有终端生效
                        :root {
                            //font-size:11.43px;
                            --_fs-root:11.43px;
                        }
                        //仅在桌面端生效
                        @media (hover:hover) {
                            :root {
                                //font-size:11.43;
                                --_fs-root:11.43px;
                            }
                        }

当然我们可以通过JavaScript方法，通过点击按钮增加或减少该变量的值以实现页面缩放效果。

输出
HTML
JS

```
                
                
            
```

                
                let fsRoot = ax.style(document.documentElement).getPropertyValue('--_fs-root');
                rootback.onclick = ()=>{
                    document.documentElement.style.setProperty('font-size', fsRoot);
                }
                root18px.onclick = ()=>{
                    document.documentElement.style.setProperty('font-size', 'calc(18px/1.4)');
                }
                root16px.onclick = ()=>{
                    document.documentElement.style.setProperty('font-size', 'calc(16px/1.4)');
                }

scale整体缩放

缩放网页最简单直接的方式是通过transform.scale或scale样式整体改变html节点的尺寸，不过该方法可能会产生滚动条，而且1px的边框将变粗。

输出
HTML
JS

```
                
                
            
```

                
                scaleback.onclick = ()=>{
                     document.documentElement.style.setProperty('scale', '1');
                }
                scale18px.onclick = ()=>{
                     document.documentElement.style.setProperty('scale', '1.29');
                }
                scale16px.onclick = ()=>{
                    document.documentElement.style.setProperty('scale', '11.43');
                }

Width & height元素宽度和高度

1周前更新

很抱歉没有了