58 字节的 CSS 几乎在任何地方看起来都很棒

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

posted @   哈哈哈来了啊啊啊  阅读(20)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
点击右上角即可分享
微信分享提示