Size尺寸

2024-06-19 00:20:11首发，54年前更新

网页中常见的尺寸的单位是px、em、rem、vh和vw；本框架主要使用px、em和rem作为元素的尺寸单位，px常用于固定尺寸的元素，比如1px的分割线；em常用于需要自由改变尺寸的元素，比如input表单域；rem常用于随全局改变尺寸的元素，本框架的大部分元素均支持全局尺寸改变（修改root的fontsize属性）。

尺寸单位

本框架主要使用了3中尺寸单位来定义元素的大小，分别rem，em和px。

设置全局尺寸。我们将根节点的字号定义为了10px，正文字号为1.4rem（即14px），任何使用rem单位的元素都会随着根节点字号变化而变化。
局部元素分两种，一种是字号单位是rem的局部元素，一种是单位为px的局部元素；局部元素内的子节点的height、line-height等属性均以em单位来设置。
对于不需要做自适应的元素，应该使用px单位，比如告示、提醒等元素，通常使用12px，即适合中文的最小字号

尺寸自适应

由于移动终端的屏幕分辨率普遍较高，同样以px为单位的元素在移动终端中会显得比较小，所以需要在移动终端适当的提高根节点的字号以实现全部增大字号；经过测试，在移动终端16px~18px的字号比较适合浏览。

演示示例

默认平板竖手机竖

局部元素尺寸

很多框架会针对某个组件或元素提供有限的sm、md和lg尺寸选择，这样子会大大限制设计师的创造能力；为了满足千变万化的前端设计风格，应该允许用户自行设置元素的大小。也就是说元素的字号一变，那么元素的整体尺寸也跟着变化。

本框架的按钮组件以及原生表单控件均可通过font-size来控制整体尺寸。

输出
HTML
JS

```
                
                
            
```

                
                    let children = [...document.querySelector('#elems').children];
                    fs12.onclick = ()=>{
                      children.forEach(k=>{
                        k.style.fontSize = '12px';
                      })
                    }
                    fs14.onclick = ()=>{
                      children.forEach(k=>{
                        k.style.fontSize = '14px';
                      })
                    }
                    fs18.onclick = ()=>{
                      children.forEach(k=>{
                        k.style.fontSize = '18px';
                      })
                    }
                    fs22.onclick = ()=>{
                      children.forEach(k=>{
                        k.style.fontSize = '22px';
                      })
                    }
                    fs28.onclick = ()=>{
                      children.forEach(k=>{
                        k.style.fontSize = '28px';
                      })
                    }

固定尺寸

并不是对于所有元素都希望非精确控制，反而有时候为了规范尺寸需要使用固定尺寸的元素，我们通常以xxs、xs、sm、md、lg、xl和xxl来规定尺寸。

这类元素通常是本框架自定义的组件或模块，例如AX-BTN组件。如果要修改某个尺寸的组件样式，通常通过修改元素内的顶级变量来实现。

例如与按钮尺寸关联的变量有：--_btn-h和--_btn-pd-lr。

输出
HTML
JS

确认
```
                
                
            
```

                
                    let demobtn = document.querySelector('#demobtn'),
                      cache=[demobtn.style.getPropertyValue('--_btn-h'),demobtn.style.getPropertyValue('--_btn-p-lr')];
                    attrsize.onclick = ()=>{
                      demobtn.setAttribute('size','lg');
                    }
                    stylesize.onclick = ()=>{
                      demobtn.style.setProperty('--_btn-h', '3.43em');
                      demobtn.style.setProperty('--_btn-p-lr', '2em');
                    }
                    reset.onclick = ()=>{
                      demobtn.removeAttribute('size');
                      demobtn.style.setProperty('--_btn-h', cache[0]);
                      demobtn.style.setProperty('--_btn-p-lr', cache[1]);
                    }

最小尺寸

页面中的一些不起眼的小元素可以采用最小尺寸去设计，他们只需要被看到而不用占用太大篇幅，例如alert警告文字等。

本框架提供的最小尺寸变量如下：

_sz-min：0.4rem（4px），通常用来表示元素间隙
_sz-em-min：0.286em（4/14），通常用来表示元素间隙
_sz-ignore：1.2rem（12px），通常用来表示文本字号
_fs-min：12px，通常用来表示文本字号
_lh-min：18px，通常用来表示文本行高

输出
HTML

这行警告文字，使用px作为单位，文本字号已经定死
```
                
                
            
```

尺寸变量

以下列举本框架可以改变元素尺寸的内置变量。

元素名	尺寸变量	说明
AX-BTN	_btn-h,_btn-p-lr	按钮组件
input(submit/reset)	_btn-h,_btn-p-lr	原生提交和重置按钮
button	_btn-h,_btn-p-lr	普通原生按钮

变量命名中的部分简写对照：

全称	简写	全称	简写	全称	简写
padding	p	margin	m	radius	r
top & bottom	tb	left & right	lr	h	height
w	width	line height	lh	size	sz
color	c	align	a	border	bd
background	bg	shadow	sd	gap	g
font family	ff	font size	fs	opacity	o