利用动态viewport+rem制作一张自适应的svg雪碧图icon

   <blockquote>     <p>先看下主流浏览器 、手机的尺寸和分辨率</p>    </blockquote>    <h2>     <div class="image-package" href="https://simg.open-open.com/show/fa1ad5340f86eac06563969349264fa3.png">     <img src="https://simg.open-open.com/show/fa1ad5340f86eac06563969349264fa3.png" width="700" height="3838.9294403892945" data-original-src="https://simg.open-open.com/show/798eaad8c4ad5a8383c0420b216617be.png" />      <br />      <div class="image-caption">      主流浏览器和手机的尺寸      </div>     </div> </h2>    <blockquote>     <p>移动端雪碧图的痛点-不能自适应</p>    </blockquote>    <p>移动端的icon大小不是不定的，如果用px固定住，在高分辨率手机中就会变得很小在低分辨率手机中就会变得很大。<br /> 所以手机都拿icon图标需要用百分比来或者用rem布局来调整icon的大小。</p>    <blockquote>     <p>background-position百分比计算公式</p>    </blockquote>    <pre class="brush:cpp; toolbar: true; auto-links: false;">x：（容器的宽度-图片的宽度）x (50%) y：（容器的高度-图片的高度）x (30%)</pre>    <p>比如：容器是width：600px；height：600px；而图片是width：200px；height：200px； </p>    <pre class="brush:cpp; toolbar: true; auto-links: false;">.icon{     width: 600px;     height: 200px;     background:#FFF url(image) no-repeat fixed 50% 30%; }</pre>    <div class="image-package" href="https://simg.open-open.com/show/a0166ce3b8b6da08313d3707ce2676b0.gif">    <img src="https://simg.open-open.com/show/a0166ce3b8b6da08313d3707ce2676b0.gif" width="506" height="400" data-original-src="https://simg.open-open.com/show/a0166ce3b8b6da08313d3707ce2676b0.gif" />     <br />     <div class="image-caption">     图片来源：www.cnblogs.com/lxin/p/3636302.html     </div>    </div>    <p>so:<br /> background-position:0% 0%;表示左上角对齐<br /> background-position:100% 0%;表示右上角对齐</p>    <blockquote>     <p>动态viewport</p>    </blockquote>    <p>动态viewport最初是由手淘使用来解决适应各种手机分辨率的一个解决方案：<br /> 会根据手机的分辨率和比率rate生成一个最佳的viewpoint和相对应基准的font-size大小;</p>    <h1>viewport.js</h1>    <pre class="brush:cpp; toolbar: true; auto-links: false;">!function(win) {     function resize() {         var domWidth = domEle.getBoundingClientRect().width;         if(domWidth / v > 540){             domWidth = 540 * v;         }         win.rem = domWidth / 10;         domEle.style.fontSize = win.rem + "px";         var rem= win.rem;     }     var v, initial_scale, timeCode, dom = win.document, domEle = dom.documentElement, viewport = dom.querySelector('meta[name="viewport"]'), flexible = dom.querySelector('meta[name="flexible"]');     if (viewport) {         var o = viewport.getAttribute("content").match(/initial\-scale=(["']?)([\d\.]+)\1?/);         if(o){             initial_scale = parseFloat(o[2]);             v = parseInt(1 / initial_scale);         }     } else if(flexible) {         var o = flexible.getAttribute("content").match(/initial\-dpr=(["']?)([\d\.]+)\1?/);         if (o) {             v = parseFloat(o[2]);             initial_scale = parseFloat((1 / v).toFixed(2))         }     }     if (!v && !initial_scale) {         var n = (win.navigator.appVersion.match(/android/gi), win.navigator.appVersion.match(/iphone/gi));         v = win.devicePixelRatio;         v = n ? v >= 3 ? 3 : v >= 2 ? 2 : 1 : 1, initial_scale = 1 / v     }     //没有viewport标签的情况下     if (domEle.setAttribute("data-dpr", v), !viewport) {         if (viewport = dom.createElement("meta"), viewport.setAttribute("name", "viewport"), viewport.setAttribute("content", "initial-scale=" + initial_scale + ", maximum-scale=" + initial_scale + ", minimum-scale=" + initial_scale + ", user-scalable=no"), domEle.firstElementChild) {             domEle.firstElementChild.appendChild(viewport)         } else {             var m = dom.createElement("div");             m.appendChild(viewport), dom.write(m.innerHTML)         }     }     win.dpr = v;     win.addEventListener("resize", function() {         clearTimeout(timeCode), timeCode = setTimeout(resize, 300)     }, false);     win.addEventListener("pageshow", function(b) {         b.persisted && (clearTimeout(timeCode), timeCode = setTimeout(resize, 300))     }, false);     resize(); }(window);</pre>    <blockquote>     <p>rem</p>    </blockquote>    <p>CSS3的出现，他同时引进了一些新的单位，包括我们今天所说的rem。在W3C官网上是这样描述rem的——“font size of the root element” 。<br /> 关于rem两个传送门<br /> <a href="/misc/goto?guid=4959614535461285106" target="_blank">http://www.w3cplus.com/css3/define-font-size-with-css3-rem</a><br /> <a href="/misc/goto?guid=4959653038295559054" target="_blank">http://xiaoho.com/webapp-font-size/</a></p>    <blockquote>     <p>真正的高能开始</p>    </blockquote>    <p>先上代码</p>    <h1>html</h1>    <pre class="brush:cpp; toolbar: true; auto-links: false;"><span class="i i_menu_0"></span></pre>    <h1>css</h1>    <pre class="brush:cpp; toolbar: true; auto-links: false;">.i {     width: 0.8rem; height: 0.8rem;     background: url(../images/ico_global.svg) no-repeat;     display: inline-block;     background-size: 1100%; } .i_menu_0 { background-position: 0% 0%; } .i_menu_1 { background-position: 10% 0%; } .i_menu_2 { background-position: 20% 0%; } .i_menu_3 { background-position: 30% 0%; } .i_menu_4 { background-position: 40% 0%; } .i_menu_5 { background-position: 50% 0%; }</pre>    <p>上面有两个关键属性background-size:1100%;background-position:x% x%;</p>    <p>为什么是1100%<br /> 看我的svg图就知道了</p>    <div class="image-package" href="https://simg.open-open.com/show/c7d54dccb099e5dde2d1a6a3604e2a05.jpg">    <img src="https://simg.open-open.com/show/c7d54dccb099e5dde2d1a6a3604e2a05.jpg" width="700" height="675.507900677201" data-original-src="https://simg.open-open.com/show/c8445daa9c3c5e5ffb65b1631228e29c.jpg" />     <br />     <div class="image-caption">     demosvg.jpg     </div>    </div>    <p><br /> 我把一张图片平均分成11×11的正方形格子，之所以用11×11的正方形格子，<br /> 是因为background-position: 0% 0%;是第一个格子,是从零开始计数,所以0%-100%可以平均分成最多11个整数。<br /> 当然你可以分成，3×3的格子<br /> 0%代表第一个格子<br /> 50%代表中间的格子<br /> 100%代表最后一个格子</p>    <div class="image-package" href="https://simg.open-open.com/show/bef9437b047143a116a524ddee891e94.png">    <img src="https://simg.open-open.com/show/bef9437b047143a116a524ddee891e94.png" width="222" height="220" data-original-src="https://simg.open-open.com/show/ee6ee388cea8261e4c63452b8d79730c.png" />     <br />     <div class="image-caption">     3x3.png     </div>    </div>    <blockquote>     <p>优点</p>    </blockquote>    <p>矢量化，文件大小更小，图标更清晰,加载速度更快<br /> 支持渐变背景和支持多色彩icon<br /> 调用方便</p>    <blockquote>     <p>缺点</p>    </blockquote>    <p>由于没有svg雪碧图的自动化构建工具，所有的图片都只能人工维护，维护成本有些高。<br /> 兼容性不是很好,但是如果你是做移动端，可以不用考虑这个问题。因为大多移动端都支持svg图片。<br /> </p>    <div class="image-package" href="https://simg.open-open.com/show/ce213059361012cc453108218939accd.jpg">    <img src="https://simg.open-open.com/show/ce213059361012cc453108218939accd.jpg" width="700" height="551.7647058823529" data-original-src="https://simg.open-open.com/show/f0664a4f80f8af343bd904e163f93cfa.jpg" />     <br />     <div class="image-caption">     svg优雅的降级.jpg     </div>    </div>    <p><br /> 关于svg优雅的降级可以查看张鑫旭的这篇博客<br /> <a href="/misc/goto?guid=4959653038396657091" target="_blank">http://www.zhangxinxu.com/wordpress/2013/09/svg-fallbacks/</a></p>    <p>这次分享就到这里，希望对大家有所帮助！</p>    <p>来自： <a href="/misc/goto?guid=4959653038486857441" rel="nofollow" target="_blank">http://www.jianshu.com/p/91dc6d5ab88c</a></p>