58 字节的 CSS 几乎在任何地方看起来都很棒
58 bytes of CSS to look great nearly everywhere
W 在制作这个网站时，我想要一种简单、合理的方式让它在大多数显示器上看起来都很好。不计算任何最小化技术，以下 58 个字节对我来说效果很好：
主要的 {
最大宽度：38rem；
填充：2rem；
边距：自动；
}
让我们分解一下：
最大宽度 ： 38 雷姆
大多数浏览器的默认字体大小似乎是 16px，所以 38rem 是 608px。至少支持 600px 显示似乎是合理的。
填充： 2雷姆
如果显示器的宽度低于 38rem，那么这个填充让事情看起来相当不错，直到大约 256 像素。虽然这看起来是可选的，但实际上它用一块石头击中了两只鸟——填充还提供了急需的顶部和底部空白。
利润： 汽车
这实际上是使页面居中所需的全部内容，因为 main 是语义 html5 下的块元素。
一个关键的见解
我花了惊人的迭代次数才达到这一点。也许这说明我对“现代”网络开发一无所知，或者，正如我更倾向于相信的那样，在一个复杂的世界中保持简单是多么困难。
更新 1
经过一些讨论，我已经将填充更改为
1.5rem在移动和桌面显示器之间实现更愉快的折衷。
更新 2
这 通道单位 引起了我的注意，我非常喜欢它！从那以后我变成了
70ch/2ch，它看起来几乎相同，但少了 2 个字节，只是填充有点小（ 手机的好东西 ）。
100 字节的 CSS 让任何地方看起来都很棒（增强版）
这应该是简单的插入式 css，以便在大多数显示器上看起来不错：
html {
最大宽度：70ch；
填充：3em 1em；
边距：自动；
行高：1.75；
字体大小：1.25em；
}
让我们分解一下。我已经用我自己的评论改编了原文。
最大宽度： 70ch
“可读范围”通常是 60–80 个字符宽度，而 CSS 让您可以直接用
ch单元。
填充： 3em 1em
如果显示器的宽度低于上面设置的最大宽度，则此填充可防止移动设备上的边到边文本。我们用
3em提供顶部/底部空白。
利润： 汽车
这确实是使页面居中所需的全部内容 — 应用于 html，因为 Dan 的站点没有语义标记，并且更有可能存在于大多数站点中。顶部标签相对于任何事物居中是不直观的，但浏览器就是这样做的。
行高： 1.75
线条之间的间距有助于提高视觉清晰度。由于原因，始终保持行高无单位。
字体大小： 1.5em
我注意到最近的设计趋势和屏幕尺寸倾向于更大的字体大小。又或许我变老了。更喜欢
时间或者雷姆超过像素如果你想让用户扩展它。您可以使用
：根代替<html>保证存在一些选择器，但它对我来说太花哨了，并且使用了一个额外的字符:)
可选多 100 个字节
h1,h2,h3,h4,h5,h6 {
边距：3em 0 1em；
} p,ul,ol {
边距底部：2em；
颜色：#1d1d1d；
字体系列：无衬线；
}
参考
代码笔
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
本文链接：https://www.qanswer.top/39632/09182712
标签：看起来,58,填充,很棒,宽度,CSS,字节 From： https://www.cnblogs.com/amboke/p/16734150.html