随着WordPress 3.5的发布,新版的Twenty Twelve(version 1.1)主题也浮出水面,很高兴的看到1.0版本中菜单不兼容IE9以下浏览器的问题已经被修正,TwentyTwelve在除了IE6以外的浏览器中均表现完美。

旧版IE下的菜单问题是如何产生的?

在之前的文章中讨论过菜单出问题的原因,菜单之所以会出问题,是因为Twenty Twelve采用了Mobile First的设计理念,样式表定义的默认版本是浏览器宽度在600像素以下的版本,当屏幕尺寸变大时,则由Media Queries来呈现PC版本。

由于IE9以下浏览器不支持Media Queries,导致使用这些浏览器访问时,无论多大的屏幕都会看到移动版本。

新版如何修复菜单问题?

现在, 新版Twenty Twelve为IE9以下浏览器添加了另外一个样式表,这样即能保证IE9以下浏览器可以看到PC版本,又能保留在其它浏览器中的Responsive特性。只要你不需要顾虑IE6,大可以放心使用Twenty Twelve 1.1

修复的代码在functions.php 第150行

/*
 * Loads the Internet Explorer specific stylesheet.
 */
wp_enqueue_style( 'twentytwelve-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentytwelve-style' ), '20121010' );
$wp_styles->add_data( 'twentytwelve-ie', 'conditional', 'lt IE 9' );

这段代码也演示了如何条件化的显示一个已经加入队列的样式表。

Twenty Ten比较老,没有HTML5特性;Twenty Eleven虽然有HTML5和Responsive特性,但代码过于复杂,有很多没用的功能。而Twenty Twelve各取所长,功能精简,代码简洁,具备Responsive和HTMl5的特性,可以作为很好的主题框架或者parent theme使用。

2条留言

  1. 呼呼,很不错哦,但是我不喜欢用官方的这个主题

评论功能已关闭