弹性网络

弹性网络(删格系统)

• sm 小屏幕
• md 中屏幕
• lg 大屏幕

响应式图片

• 给img的宽度 设置为 100%

• 使用background-image 配合 padding-top/background-size

• 使用 <picture> 标签。

    <picture>
    <source srcset="./images/banner01-small.jpg" media="(max-481px)">
    <source srcset="./images/banner01_middle.jpg" media="(max-801px)">
    <source srcset="./images/banner01.jpg">
    <img src="./images/banner01.jpg" alt="">
    </picture>  
  

• 使用 pricturefill.js 插件

    <span data-picture data-alt="响应式图片">
    <span data-src="./images/banner01-small.jpg"></span>
    <span data-src="./images/banner01_middle.jpg" data-media="(min-768px)"></span>
    <span data-src="./images/banner01.jpg" data-media="(min-992px)"></span>
    </span>
  

• 使用插件实现图片拖动

    <div id="imglist" class="swipe">
    <div class="swipe_wrap">
    	<div><img src="./theme/images/01.jpg" alt="" /></div>
    	<div><img src="./theme/images/02.jpg" alt="" /></div>
    	<div ><img src="./theme/images/03.jpg" alt="" /></div>
    </div>
    <div class="imglist-contral">
    	<span class="left" onclick="mySwipe.prev()"><</span>
    	<span class="right" onclick="mySwipe.next()">></span>
    </div>
    </div>
    window.mySwipe = new Swipe(document.getElementById('imglist'), {
    				  startSlide: 2,
    				  speed: 400,
    				  auto: 3000,
    				  continuous: true,
    				  disableScroll: false,
    				  //stopPropagation: false,
    				 // callback: function(index, elem) {},
    				  //transitionEnd: function(index, elem) {}
    				});