Skip to main content

适配移动端-响应式布局

处理图片加载​

  1. 懒加载
  2. 响应式图片自动匹配尺寸

https://github.com/aFarkas/lazysizes

生成图片资源​

通过gulp生成响应式图片的方法，限于篇幅，这里只生成了90,180和360和原始图片。实际推荐生成以下宽度的图片90, 180, 360, 540, 720, 900, 1080, 1296， 1512， 1728, 2048。以便覆盖从小屏幕到大屏幕的大部分情况（包括设备分辨率为2x的情况）。

*可以考虑生成32像素以下图片，用来做低分辨率的占位图

1.安装gulp, gulp-responsive

yarn add --dev gulp
yarn add --dev gulp-responsive

2.编写 gulpfile.js，如下所示

var gulp = require('gulp')
var responsive = require('gulp-responsive')
gulp.task('default', function (){
    return gulp
        .src('images/*.{png, jpg}')
        .pipe(
            responsive({
                '*': [
                    {
                        width: 90,
                        quality: 50,
                        rename:{
                            suffix:'-90'
                        }
                    },
                    {
                        width: 180,
                        quality: 75,
                        rename:{
                            suffix:'-180'
                        }
                    },
                    {
                        width: 360,
                        rename: {
                            suffix:'-360'
                        }
                    },
                    {
                        rename: {
                            suffix: '-original'
                        }
                    }
                ]
            }, {
                errorOnEnlargement: false,
                skipOnEnlargement: true,
                withoutEnlargement: true
            })
        )
        .pipe(gulp.dest('dist/images'))
})

3.npx gulp 生成目标图片

配置使用​

  1. 初始化配置（对背景图片懒加载处理）
<script>
function LoadJS(u) {
    var r = document.getELementsByTagName("script")[0],
        s = document.createElement("script");
    s.src = u;
    r.parentNode.insertBefore(s, r);
}
if (!window.HTMLPictureELement) {
    loadJS("js/ls.resp.img.min.js");
}
</script>
<script src="https://afarkas.github.io/lazysizes/plugins/bgset/ls.bgset.min.js"></script>
<script src="js/lazysizes.min.js" async></script>
  1. 修改图片引用
<img 
    class="img-fluid lazyload" 
    data-src="dist/images/p2604517782-32.jpg"
    data-srcset="dist/images/p2684517782-98.jpg 90w,dist/images/p2604517782-188.jpg 180w,dist/images/p2604517782-original.jpg" data-sizes="auto" alt=""
>
  1. 对背景的引用（注意引入依赖插件）
<section 
    class="banner lazyload" 
    data-bgset="dist/images/sky-540.jpg 540w, dist/images/sky-1080.jpg 1080w, dist/images/sky-original.jpg" 
    data-sizes="auto">
</section>

相关示例：

  1. https://github.com/aFarkas/lazysizes
  2. https://jsfiddle.net/trixta/bfqqnosp/
  3. https://github.com/aFarkas/lazysizes/tree/e305d28d4b6c4ff9f12dd4d438d5d7c5d41574db/plugins/bgset

其他注意点​

移动设备优先: 确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

width-device-width 表示宽度是设备屏幕的宽度。

initial-scale-1 表示初始的缩放比例。

shrink-to-fit=no 自动适应手机屏幕的宽度。

效果测试​

手动测试​

使用Chrome自带的移动端调试功能

自动测试​

Chrome的手动测试主要在方便开发者调试，最终还是要保证在用户的真机上可以正常浏览。可以像开头图片显示的，整一些手机做测试，但是没有群控的话，测试效率过低，做群控本身工程量也不小。因此，一般推荐直接使用相关的云服务，比如BrowserStack。

资源链接：BrowserStack

img