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效果如下：

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

这两天写NewRealm5的时候，因为首屏需要设置成高度占满全屏，一直很纠结，NewRealm2的时候，我是用的是JS方式，但是这个方式响应式效果不是很理想，每次窗口更改高度都要刷新页面才能看到效果，于是抛弃掉这个方案。

<script type="text/javascript">
function onresize(){ 
var len = document.documentElement.clientHeight;$("#header").css("height",len + 'px');
}; 
onresize();
</script>

较早时间接触过“vh”这个单位，这个单位是吧屏幕分成100个部分，100vh就是占满屏幕高度了，这个方法超级方便，也能较好的支持响应式，在电脑端一切准备就绪之后，在手机端打开瞬间就失望了，手机浏览器好像并不支持vh这个单位，于是求助于

利用强大的搜索引擎，在一番筛选之后，找到了一个超级简单的解决方案，利用CSS方案，就是直接在CSS初始部分加上 html,body{height:100%;}剩下的便是安心的为容器加height:100%;了

主题改动了下，原本的响应式差不多是废了，正好今天放假，呆在家里也无聊的紧，本来想给主题重新做一下响应的，但是弄起来真的是太麻烦了，也达不到我想要的效果，手机加载的东西还是那么多，于是萌生了单独做一个手机主题的想法。

既然想到了，那就实施把，单独做手机主题实现方法其实也蛮多的，但是主要的还是两种，一种是插件，忽略之，用插件不是我性格，于是用代码。

其实也不麻烦，主要就是在主页加个判断，PC和Mobile分开加载，wp_is_mobile()就可以做到，调试起来也很方便

<?php if( wp_is_mobile() ) :
include('m.index.php');
//手机主题文件
else:
//常规主题代码
endif; ?> 

用上面的范例修改一下你主题的index代码，然后新建一个m.index.php，这个就是手机版的首页了，用同样的方法，修改page和single，这样就能很快的兼容手机了，不用麻烦的做响应式 最后晒一下小成果吧，有点小简陋，没什么特别炫的功能，凑合着用把：

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

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

这里有2个关键点：

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

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

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

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

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

那么如何不使用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生效时在浏览器中的效果：

@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团队