标签 主题 下的文章

主题兼容主流浏览器，支持IE8+浏览器，往有下没做测试，理论上可以勉强阅读，Chrome浏览效果最佳。

响应式设计，采用了双导航设计，手机浏览会有非常好玩的侧滑导航哟，电脑上能够阅读的内容都尽可能的做到不隐藏了。

侧边栏保留了3个，放置页面底部位置，既保证了更多的内容，又不占用阅读空间，广告同样放在了页脚部分，不影响阅读

上图预览

NewRealm 2
NewRealm 2下载

久等了，这是我迁入Typecho的以一款主题，自用了有一段时间了，前几天找几个小伙伴测试了下，感觉还不错的样子，其实主题基本上已经算是制作完毕了，但是有几处地方因为我自用原因，需要修改HTML代码，于是今天把对应的几处都调整到后台设置，稍作整理，便发布出来了。

主题兼容主流浏览器，IE测试只测试了IE8，低版本没做测试，Chrome显示效果最佳 响应式设计，在不同终端下浏览都有非凡的阅读体验，主题侧边栏提供后台勾选选项，且边栏提供了一个200x200大小的广告位，在后台填写代码便可在整站展示，留空则关闭广告位。

由于Typecho没有 链接管理器 功能，所以主题如果需要添加友情链接还需要手动修改，修改友情链接请打开主题目录下的sidebar.php文件，在第31行我有标注，按照格式修改即可。

迁移程序，图片丢失，现只有下载链接

响应式简单说呢就针对不同的屏幕分辨率应用不同的CSS样式。比如在电脑、Pad设备上，屏幕比较宽，就可以一行放2个Div。

到了手机上，或者Pad竖着拿的的时候，一行就只放1个Div。

这里有2个关键点：

一是如何在不修改Dom结构的前提下调整布局。

二是如何判断屏幕分辨率并应用对应的CSS。

以上两点都应该不依赖与JS。

实现第一点依靠的是流式布局。就是所有参与布局的DIV都用float:left，宽度都用百分比表示。比如下图，黄色部分的宽度是60%，橘色宽度是40%。

1

如果将黄色和橘色的宽度都width=100%,那么从1行变成2行了，如下图。从而实现不修改Dom实现布局变化。

2

那么如何不使用JS而实现动态调整CSS样式就是第二个关键点。 HTML5中提供了一种新的CSS语法——@media，学名是Media Query，可以为不同的分辨率设定不同的样式。

/* Phone Portrait (320px) */
@media only screen and (max-width: 320px) {
#head { width: 100%; }
#main { width: 100%; }
#foot { width: 100%; }
#left { width: 100%; }
#right { width: 100%; }
}

上面这段代码的含义就是当屏幕宽度小于等于320像素时应用大括号中的样式。下图是在CSS生效时在浏览器中的效果：

3

@media还有一些更复杂的用法，比如：

/* Phone Landscape (480px) */
@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
这段语句就是针对iPhone横屏的。即，浏览器宽度在321-480像素之间，且方向是“横向”时生效。
不过自从Retina这中妖艳的屏幕推出，分辨率已经不能代表世界的真相了。小小的Note3的分辨率比一些17“显示的分辨率还高。
所以还有必要判断一下设备的像素密度-device-pixel-ratio。 
}

@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)

比如上面的语句就是判断终端的像素比是2的话，所渲染的样式。可以适用于iPhone4，iPhone5等设备。

除了上述两点，还需要在页面上增加一个viewport的meta标签，否则在手机上可能会有页面自动缩放的情况。例如：

<meta name="viewport" content="width=device-width; initial-scale=1.0">

总结一下：响应式布局有三个关键点：

  1. 流式布局 Liquid Layout
  2. Media Query
  3. viewport

具体细节就请大家自己研究相关的语法了。

Media Query的语法比较复杂，这里个大家推荐一个工具，可以方便的设计布局，并可以针对各种设备自动生成Media Query的语句： http://www.responsivewebcss.com/

本文转载自腾讯AlloyTeam团队

完美的浏览器 兼容，IE6下访问和主流浏览器访问效果几乎一致

亮点功能：

  • 主流浏览器完美展示，IE6+浏览器完美支持
  • 心 情说 & 公告 & 面包屑导航
  • Ajax评论 & Ajax评论顺滑翻页
  • 首页+内页，3处广 告位预留，不影响阅读
  • 垃圾评论智能判断、拦截
  • 边栏微幻灯轮播，方便推荐、展示
  • 二级下拉菜单支持
  • 更多功能等你发现...
本次已经支持二级下拉菜单了，整款主题简洁朴素，白色主色调，略加一些蓝色点缀，真的是GoodNice！

关于广 告位方面，本款主题仅预留了3处广 告位，为了不影响读者阅读体验，均将广 告位安置于边栏，3个广 告位均为250*250大小，是最常见的广 告大小 主题多处效果均为CSS实现，js使用较少，响应快，加载快，略扁平的简洁Blog风格，是个人日志必备的不二选择！ 特别注意，本款主题相关文章建议使用 无觅关联推荐

获取方法：

主题已免费放出，请在文章结尾下载主题

特别声明：

有问题请在本页留言请尊重原创作者劳动成果，节操使用，保留版权

主题预览

下载地址