Retina屏缘起

自2010年Apple发布iPhone4以后，Retina屏逐渐流行起来，其惊艳的显示效果和其细节的全面展示带给了人们全新的视觉体验，而越来越多的终端开始支持响应式，那么作为响应式中的重要一环「响应式图片」又该如何解决？

Retina屏俗称「视网膜屏」，其的设备像素比是x2，而普通屏幕像素比为x1，对于图片这种位图像素已定的资源，如果不加以处理的话，要么全都用x1倍图，那么在视网膜屏上观看就会模糊；要么都是用x2倍图，那么在普通屏幕上浏览的时候就会白白浪费流量消耗下载速度。

在开发iDevise主题的时候，我就是使用x2倍图来完成图片响应，因为图片裁剪后占用硬盘并不大，所以流量消耗几乎可以忽略，且代码量也少一些，但是在新主题iDevs中，图片开始变大，继续采用全x2倍图显然不是最佳方案了，那么该如何完成图片响应呢？

srcset属性

相对简单的解决方案就是srcset属性了，使用简单，可以非常方便的完成图片响应效果。

代码实例：

<img src="images-x1.png" 
     srcset="images-x2.png 2x"
     alt="iDevs" />

浏览器会默认访问src里面的图片路径，如果视网膜屏幕的话，浏览器会解析srcset里面的图片路径。

srcset配合sizes属性

sizes属性产生的初衷就是可以在html中实现简单的媒体查询功能，来适应越来越大规模的响应式网站开发。

那么w是个啥？ w是一个衡量宽度的标识符，一定要对应图片的真实宽度，这会使得浏览器正确的选择图片，如果w值和图片宽度不对应时，实际渲染是会有问题的。

示例代码：

<img src="images-x1.jpg"   
     srcset="images-x1.jpg 500w, images-x2.jpg 1000w, images-x3.jpg 1500w" 
     sizes="500px">

sizes=500px，也就是图片宽度设置为了500px，那么：

x1倍屏幕访问时就会选用images-x1.jpg；

x2倍屏幕可渲染的位图像素宽度就变为了1000px，也就选用了images-x2.jpg；

类推一下，x3倍屏幕当然就会访问images-x3.jpg了。

现代浏览器对该属性的支持是越来越多了，这个方案应该会是个潮流。

那么兼容性如何呢？

电脑设备

手持设备

在移动端Andriod浏览器的支持实在是太差劲了，PC端对于一些现代的浏览器支持性就非常好。

当然，还有其他的一些解决方案，后期有时间再与大家探讨与分享。

本文参考： https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img http://www.zhangxinxu.com/wordpress/2014/10/responsive-images-srcset-size-w-descriptor/ http://www.jianshu.com/p/235ef450f5e9 http://liyaodong.com/2015/10/18/responsive-image-workflow/

最终效果如上，手机端（左）、电脑端（右）

使用的jQuery，所以只要你的页面引用了一次jQuery，那么代码量真的是相当少，两三段就实现了js控制，那么，粗暴一点，直接贴代码吧。

HTML框架：

<header id="header">
    <nav class="navs">
        <a href="#" class="logo">iDevs</a>
        <div id="switch">Menu</div>
        <ul class="menu case_menu">
            <li class="current"><a href="#header">Home</a></li>
            <li><a href="#title">Service</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#maps">Contact</a></li>
        </ul>
    </nav>
</header>
<script type="text/javascript" src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#switch").click(function(){
  $(".case_menu").toggle(300);
  });
});
</script>

CSS：

#header{width:100%;height:2000px;}
#header .navs{background:#5c7;height: 80px;width: 100%;line-height:80px;}
#header .navs .logo{float:left;display: block;margin: 0 10px;color: #fff;font-size: 30px;}
#header #switch{display:none;}
#header .navs .menu{float: right;}
#header .navs .menu li{display: inline;}
#header .navs .menu li a{color: #fff;padding: 0 10px;font-size:20px;text-decoration:none;transition:.2s;}
#header .navs .menu li a:hover{text-shadow:1px 1px 1px #295}
#header .navs .menu li.current a{text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff}
@media(max-width:700px){
#header #switch{display:block;float:right;color:#fff;padding:0 10px;margin: 0 10px 0 0; font-size:20px;background:#3a5;cursor: pointer;}
#header .navs .menu{position:absolute;right:10px;top:80px;display:none;background:#3a5;height:200px;width:180px;text-align:center;}
#header .navs .menu li{line-height:50px;}
#header .navs .menu li a{display:block;font-size:16px;width:100%;padding:0}
#header .navs .menu li a:hover,#header .navs .menu li.current a{background: #295}
}

Demo效果

嗯，大概就是这样，上面代码的Demo效果如下：

自行修改代码美化吧，就不继续贴代码了。

其实很早之前久开始整理这个主题了，但是一直有其它的事情在做，所以一直拖到现在才发布出来，不过赶得巧，就当做给大家的新年礼物吧。

亮点功能

1. 简洁的设计风格（最大的亮点？好吧，初衷就是简洁）
2. 轻量化的安装体积（仅62.3K，文件少了，功能却不少）
3. 全PJAX无刷新操作（又一买点，优化的很好了，基本不会遇到什么问题）
4. 响应式的布局（嗯，我的主题全都是响应式的）
5. 个性的展示区域（文章和页面下面，好像很有biger）
6. 强劲的性能优化（去掉了很多冗余代码，可能感受不到，但是强迫症会看源代码）
7. 读者墙，新建页面填入【active num=72 size=70 days=730】字段自行替换“【】”为“[]”

下载主题

简单的制作了一个下载页，方便统计下载次数，也为了方便展示主题。

WordPress版：https://www.iyuren.com

妹Blog版：http://i.acg.vc/#!21   已失效

界面预览

主题声明

声明1：iDevise目前已经暂停维护，如没有出现重大Bug将不再进行后续更新和维护。

声明2：使用过程中如果遇到什么问题可以直接在此页面留言，但不保证解答全部问题。

声明3：iDevise的移植、衍生版本的主题及产品的使用问题请联系移植、修改作者，本博客不提供无偿答疑服务，请谅解。

更新历史

• 2016年2月18日更新
1. 修复了php7下无法正常使用的问题［重要］

<li>修复了视网膜屏幕下，icon图片模糊的问题</li>

<li>新增评论链接跳转</li>

<li>更改了手机下icon样式</li>

<li>其他细节改进 2016年2月25日更新</li>

• 2016年2月25日更新
1. 修复了php7.0.3下评论区域错误［重要］

<li>移除了自带的jquery，改调用又拍云的公共库</li>

<li>公共库如果加载失败，可以ajax评论，无法pjax页面 2016年3月3日更新</li>

• 2016年3月3日更新
1. 新增返回顶部功能

<li>优化了pjax方式，更方便的控制非pjax链接 2016年3月4日更新</li>

• 2016年3月4日更新
1. 新增主题更新推送［重要］

<li>精简主题体积，新版压缩包仅47kb</li>

<li>道歉，由于版本控制不规范，上个版本出了一些问题，紧急推送</li>

• 2016年3月13日更新
1. 更换了文章列表翻页效果［重要］

<li>修复了手机下导航菜单点击区域过小问题，且可以正常显示与隐藏了</li>

<li>新增“赏赐”功能</li>

<li>新增社交链接区域</li>

<li>优化评论区域显示效果</li>

<li>修复了裁剪图片文件太大的问题</li>

<li>评论者链接已经过base64处理，外链跳转方式更安全</li>

<li>优化了loading动画显示效果</li>

• 2016年4月2日更新
1. CSS细节优化

<li>新增评论楼层显示</li>

<li>新增代码高亮功能【已取消】</li>

• 2016年4月15日更新
1. 修复了文章列表时间显示问题［重要］

<li>调整了wordpress更新后评论区域样式</li>

<li>全新的邮件通知样式</li>

<li>取消了上一个版本的代码高亮功能（BUG不好调。懒）</li>

<li>新的文章结束样式，先这样，不喜欢的话下期再更新</li>

• 2016年5月2日更新
1. Css样式细节微调

<li>其他几处bug修复</li>

• 2016年7月3日更新
1. 导航菜单手机端支持打开和关闭了【终于】

<li>导航菜单支持耳机菜单了</li>

<li>其他CSS微调</li>

<li>···1.7.5版、1.8.1版、1.9.3版</li>

• 2016年12月30日更新
1. 更改主题设置方式【重要】

<li>优化缩略图函数</li>

<li>其他CSS微调</li>

• 2017年1月4日更新
1. 新增Pjax开关【重要】 --出现插件不兼容时可以关闭pjax

<li>文章插入相册美化</li>

<li>代码块CSS优化</li>

<li>滚动条美化</li>

适配计划，非常抱歉，关于iDevise主题的Typecho的适配一直在跳票，之前是找的一个TP群里的热心网友帮忙适配，但是因为个人时间原因，适配没能完成，所以我这边会抽出时间适配一遍，但是可能会阉割一些功能，例如令我头痛不已的PJAX，但我会尽力而为，争取3月初放出，跳票吞翔，敬请期待 已吞到哭～。

欢呼吧，雀跃吧，主题已经完成Typecho版本和妹Blog版本的适配工作，在此感谢@Kven和@Ace

同时欢迎Typecho界大牛献计献策，帮助完成适配工作。当然，如果你有适配能力，欢迎提交你的适配版本，我会将下载地址导向你的博客，帮你引流。

使用说明

鉴于主题设置面板基本用不上几次，所以我没有对主题添加设置面板功能，而是把相关设置放到了个人资料里面。 友情链接和统计代码添加，轻前往后台>用户>我的个人资料，最下方进行编辑，同时，文章和页面结束为止的介绍也是调用的个人资料，所以建议个人资料填写尽可能详细。

插件推荐

WP SMTP 这个发邮件就不提了。

WP-Markdown 我使用的是Markdown编辑器，建议大家也感受一下MD的魅力，富文本编辑器那狗屎般的冗余代码，强迫症忍不了。

附加功能

往functions.php添加代码即刻实现相应功能，不懂勿改。

// 静态资源使用七牛 CDN
function Qiniu_cdn(){ob_start( 'Qiniu_cdn_replace' );}
add_action( 'template_redirect', 'Qiniu_cdn' );
function Qiniu_cdn_replace( $code ){
    $cdn_exts = 'png|jpg|jpeg|gif|bmp';
    $cdn_dirs = str_replace( '-', '\-', 'wp-content|wp-includes' );
    $regex = '/' . str_replace( '/', '\/', site_url() ) . '\/((' . $cdn_dirs . ')\/[^\s\?\\\'\"\;\>\<]{1,}.(' . $cdn_exts . '))([\"\\\'\s\?]{1})/';
    return preg_replace( $regex, '//七牛的链接/$1$4', $code );
}

再次感谢JV提供的PJAX封装包

新主题NewWord算是完美竣工了，总大小不到60Kb，支持PJAX，响应式设计（手机阅读真心简洁），不过刚开始蛮喜欢这个布局的，可是随着深入设计，越发觉得有些单调，所以我打算再设计一套。

临近期末，时间越发紧迫，且前段时间忙比赛的事情，落下了不少课程，需要一点点补过来，有些课已经结课了，作业也是不少，McBlog的二次开发暂缓，博客可能要有一小段时间不更新了。

下载主题

喜欢NewWord的朋友，上篇文章说好的免费放出，那就绝不食言，点击下面链接进行下载：

立即下载（56.1KB）

2015年12月23日更新：

修复了style没有描述不能上传安装的问题

修复了pjax两处排除链接问题

更改了网页标题调用方式

注：开放下载后2周内如没有发现重大BUG，后续更新停止

本方法同样适用于其他CDN，如：又拍云镜像。

如何注册就不再一一赘述，如果还没有注册，可以点此注册

登陆到七牛的控制面板，申请一个空间：

进入空间设置，添加镜像源：

一切就绪后，在主题functions.php内添加如下代码：

// 静态资源使用七牛 CDN
function Qiniu_cdn(){ob_start( 'Qiniu_cdn_replace' );}
add_action( 'template_redirect', 'Qiniu_cdn' );
// 替换静态资源链接为七牛 CDN
function Qiniu_cdn_replace( $code ){
    $cdn_exts = 'png|jpg|jpeg|gif|bmp';
    $cdn_dirs = str_replace( '-', '\-', 'wp-content|wp-includes' );
    $regex = '/' . str_replace( '/', '\/', site_url() ) . '\/((' . $cdn_dirs . ')\/[^\s\?\\\'\"\;\>\<]{1,}.(' . $cdn_exts . '))([\"\\\'\s\?]{1})/';
    return preg_replace( $regex, '//file.biji.io/$1$4', $code );
}

注意事项

注意缓存文件格式$cdn_exts，同时注意修改return，将file.biji.io修改为你从七牛那里获得到的链接即可。