使用 rems 和 ems 创建可伸缩元素
Version >= 3
你可以使用 html
标签的 font-size
定义的 rem
来设置元素的样式,方法是将 font-size
设置为 rem
的值,并在元素内使用 em
来创建与你的全局 font-size
一起缩放的元素。
HTML:
<input type="button" value="Button">
<input type="range">
<input type="text" value="Text">
相关 CSS:
html {
font-size: 16px;
}
input[type="button"] {
font-size: 1rem;
padding: 0.5em 2em;
}
input[type="range"] {
font-size: 1rem;
width: 10em;
}
input[type=text] {
font-size: 1rem;
padding: 0.5em;
}