一些毫无意义的CSS代码屏幕爆炸了。

如何格式化窄屏幕代码块

你需要用编程惯例和语言风格指南,打破使代码适合的块移动。使预格式化代码块配合在窄屏幕是欠拨的艺术形式。

代码通常在其以固定宽度的字体与缩进空白的显著量设定宽预格式化块呈现。这些块并不总是可用的空间大小适合页面布局在PC上。他们经常需要水平滚动或按比例缩小到不可读的字体大小移动。

所以,你可以做你的代码块,使经验更好地为移动阅读器?

在这篇文章中,我将专注于手机屏幕上,而忽略了超窄的屏幕像智能手表。像素尺寸整篇文章是屏幕分辨率无关,并使用CSS的像素的测量定义(96个像素等于1英寸),而不是使用物理设备的像素。

小于每行一半的传统角色(CPL)极限

由于历史的原因追溯到码写在20世纪20年代打孔卡,并通过从70年代终端屏进行的;编程风格指南和编辑线路长度设定为每行80个字符(CPL)或更小。你会发现今天这个强制的风格指南Python代码(PEP 8),Ruby的风格指南,以及其他许多英寸

但是,你不会适应高达固定宽度字型的80个字符到手机屏幕,并保持一个可读的字体大小。最多可以配合在360像素宽显示器(包括在任一侧上的10像素裕度)上的舒适的18像素的字体大小32个字符。这是最常见的移动分辨率,也是最小的一个。

您可以适合在64个字符,如果你问你的读者可以水平翻转自己的手机。他们一定会怨恨你的关心和中断他们的阅读。还有市场上的很多手机,甚至是新的,有方形的显示器。

可以使一个流体预格式化代码块回流到字符限度内适合窄(移动人像),中(移动景观/片),和大的显示器(个人电脑)。你可能有,因为有这份工作没有自动化工具,该自己做。

在这一点上,先进的CSS-造型师可能会像CSS规则集的思考空白:预缠绕;字突破:突破字;。但是,这种方法不会处理缩进水平,将打破不合时宜的地方行。

相反,你需要的时候在一个适当的地方投资手动换行的代码段显示:内联块;元素。您的样式表(可能是由JavaScript辅助)需要缩进适当级别适用于换行。这将是一个耗时的过程。

水平滚动

你要避免依赖水平滚动出示您的代码块。水平滚动皮通过推动其关闭上意外的轴电位的信息。读者希望找到通过垂直滚动文档透露更多的内容。许多浏览器默认情况下也隐藏滚动条,让读者不具有的视觉暗示将有更多的内容在一旁。

长线路长度与水平滚动就更难找到自己的位置上文本的下一行(下称“回扫”)。

水平滚动可以是在牢不可破长串预期的情况下(例如URL,文件路径,或长函数名)是不可避免的。请确保您在您的设计暗示这样的读者会注意到,有更多的内容在一旁。yabo88软件下载

缩进

始终缩进使用两个空格字符,而不是制表符。制表字符是八个空格默认。这是宝贵的空间,你不能再浪费在紧张的字符,每行的预算。

无视你的首选缩进风格或语言的惯例。你想唯一的时间使用制表符,如果它在你的代码块中的显著特征。

还有一些希望你,如果你坚持使用制表符,而不是空格。CSS属性标签尺寸可用于重新定义的长度。例如。制表大小:2;做一个制表符两个空格宽。然而,浏览器的支持是有限的。

结论

你要么需要传播你的资源薄而格式三个独立的代码块的手机,平板电脑和大屏幕。另外,您也CAM选择集中在移动网络上。

你只限于32 CPL和保守的缩进的使用。此外,请确保您测试您的设计和移动内容。yabo88软件下载