@codady/normalize
Version:
@codady/normalize, A modern alternative to normalize.css, focused on typography, form usability, and cross-browser consistency.
117 lines (97 loc) • 1.87 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>tab-size 可视化对比</title>
<link id="normalize-css" rel="stylesheet" href="../src/normalize.css">
<style>
body{
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
background:#f5f6f7;
padding:40px;
}
h1{
margin-bottom:30px;
}
.grid{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
gap:24px;
}
.card{
background:#fff;
border-radius:12px;
box-shadow:0 2px 10px rgba(0,0,0,.08);
padding:18px;
}
h2{
margin-top:0;
font-size:18px;
}
pre{
background:#0d1117;
color:#c9d1d9;
padding:14px;
border-radius:8px;
overflow:auto;
line-height:1.5;
}
/* 不同 tab-size */
.tab2 pre{ tab-size: 2; }
.tab4 pre{ tab-size: 4; }
.tab8 pre{ tab-size: 8; }
</style>
</head>
<body>
<h1>📏 tab-size 缩进宽度对比</h1>
<div class="grid">
<div class="card tab2">
<h2>tab-size: 2</h2>
<pre>
function renderList(items) {
if (!items.length) {
return null;
}
for (let i = 0; i < items.length; i++) {
const item = items[i];
console.log(item.name, item.value);
}
return true;
}
</pre>
</div>
<div class="card tab4">
<h2>tab-size: 4（推荐）</h2>
<pre>
function renderList(items) {
if (!items.length) {
return null;
}
for (let i = 0; i < items.length; i++) {
const item = items[i];
console.log(item.name, item.value);
}
return true;
}
</pre>
</div>
<div class="card tab8">
<h2>tab-size: 8（浏览器默认）</h2>
<pre>
function renderList(items) {
if (!items.length) {
return null;
}
for (let i = 0; i < items.length; i++) {
const item = items[i];
console.log(item.name, item.value);
}
return true;
}
</pre>
</div>
</div>
<script src="./toggle-css.js"></script>
</body>
</html>