用于使WordPress博客可打印的简单CS亚博yabo88app 下载S

我们都知道跨浏览器的兼容亚博体育下载性。如果你曾经尝试过博客设计,你就知道Internet Explorer可能会引起的头痛。每个人都知道,让你的设计在每一个现代浏览器正确的是至关重要的效果,你的设计。然而,我们大多数人完全忽略了设计兼容性的两个不那么重要但仍然重要的方面:打印样式和手持(主要指手机)样式。

打印样式的重要性

打印样式的重要性会有很大的不同。如果你在经营一个厨房食谱博客,这绝对是至关重要的,因为每个呆在家里的妈妈都想把那些食谱打印出来。如果你在经营一个科技博客,那就不那么重要了,但不需要很长时间,这当然有帮助,因为有人会想在某个时间点上打印你的网站。

[发布图像]

手持样式的重要性

手持样式的重要性也会有所不同。一般来说,移动网络的使用在增加,打印机的使用在减少。根据科技博客,请2009年,移动网络使用量翻了一番多。它仍然只占总网络消费量的1%多一点,但随着移动网络服务的成本持续下降,其增长速度很快,而且应该继续攀升,Wi-Fi热点也越来越普遍。

再一次,这将在很大程度上取决于你的定位,但我向你保证,如果你的网站有合理的流量,有人正在通过手持设备查看它。

开始

首先,让我先说一句,这绝不是包罗万象的。不同的浏览器将以不同的方式读取打印CSS,此外,还有大约500万种(稍亚博体育下载微夸张)不同的移动浏览器。他们中的大多数以自己的方式处理手持CSS。就这点而言,他们中的一些人根本不处理手持CSS,只是或多或少地像普通浏览器一样工作(iPhone有人吗?)考虑到这些假设,我将向您介绍一个起点,使您的网站能够在大多数浏览器/打印机组合上正常打印,在大多数移动浏览器中都能很好地显示。如果你想要一个全面的方法,这是一对伟大的 资源.

打印时要记住的最重要的一点是,当超链接位于一张计算机纸上时,没有人可以单击任何超链接。那是什么意思?99%的时候,最好在打印时隐藏边栏和导航菜单。你还想隐藏任何社交媒体,分享,以及出现在侧边栏之外的RSS订阅链接,尤其是当它们是图像时!你说什么?

也,记住墨水不便宜是很重要的!为了减少墨水的使用,你所能做的任何事情,特别是彩色墨水,都是对来访者的一种常见礼貌。像使用白色背景和黑色文本之类的东西在这里真的很有帮助。另外,如果你有一个大的标志,你可能想隐藏它,插入一个小的标志只是为了打印的目的。

指定打印样式

所以,如何隐藏侧边栏和导航菜单,你如何做出所有其他的改变?其实很简单!你说什么?

CSS有一些内容媒体我们将用于指定仅用于打印的样式。看起来是这样的:

@media print.侧边栏,.菜单显示:无;正文背景:fff;}}

显然,这些只是几个例子,您需要为主题使用适当的选择器,但基本的想法是将所有的打印样式包装在@媒体打印{}括号。再一次,它不会覆盖每个打印机/浏览器设置,但应该是相当接近的。

手持提示

如果您使用的是一个带有语义标记的坚实的代码库,那么您在这方面就遥遥领先了。当然,很多事情都是这样的,但在移动浏览方面,错误/草率的代码确实会出现。考虑到这一点,我建议在一个坚实的框架上构建您的站点,比如论文起源.

要记住的主要一点是,绝大多数手持屏幕的宽度不超过480像素。这意味着一些事情:

  • 减少利润是个好主意,衬垫,以及其他空白空间,以适应较小的屏幕尺寸。
  • 使用一列以减少水平滚动。去掉侧边栏上的浮点数,并将其放在主内容列下面。
  • 你需要使用对比鲜明的配色方案。在你的网站上使用17种灰色?在你的笔记本电脑上看起来很可爱,但许多流行的移动浏览器的调色板有限,因此,您可能需要使用手持CSS更改一些颜色。

指定手持样式

有几种方法可以设置移动样式。如果你不想把手弄脏,你可以像动员.它被像Boing Boing这样的大博客使用,和读写网.它还允许您拥有各种酷的功能,但是如果你想要一些高级功能的话,它确实需要一点钱。

如果你想自己动手,下面是一个简单的方法。亚博体育下载再一次,这不完全包括在内,但将覆盖大多数移动浏览器。您可以这样做:

@media handheld.侧边栏,.内容浮动:无;正文背景图像:无;P颜色:111;A颜色:dd0000;}}

再一次,您只需将手持设备的特定样式包装在@多媒体手持设备括号并将代码放在样式表的底部。

额外的iPhone提示

如我之前所说,iPhone(连同iPod touch)忽略了@多媒体手持设备.仍然可以通过修改的@media规范来确定目标。只使用@媒体屏幕和(最大设备宽度:480px)而不是@多媒体手持设备.

最后,请记住,iPhone(以及大多数其他基于Mac的设备)的主菜单上都有图标,使最终用户很容易找到他们的最爱。如果他们希望将您的站点添加到此列表中,最好能容纳他们。您可以通过将其添加到您的函数(custom_functions.php for论文用户):

函数iphone_icon()?>
            

            
亚当有十年的WordPress设计师经验,亚博yabo88app 下载“开发商和最初的贡献者之一”艺术博客-www.gyu-kura.com的先驱