流式布局需要知道些什么

流式布局原理

• 流式布局，就是百分比布局，也称非固定像素布局。
• 通过将盒子的宽度设置成百分比，从而根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充
• 流式布局方式是移动web开发使用的比较常见的布局方式。
• 注意事项
  • 制作过程中，需要定义页面的最大和最小支持度
    • max-width 最大宽度（max-height最大高度）
    • min-width 最小宽度（min-height最小高度）

二倍精灵图

• 在firework里面把精灵图等比例缩放为原来的一半
• 之后根据新的大小测量坐标
• 注意代码里面background-size也要写：精灵图原来宽度的一半

图片格式

DPG图片压缩技术

京东自主研发推出DPG图片压缩技术，经测试该技术，可直接节省用户近50%的浏览流量，极大地提升了用户的网页打开速度。能够兼容jpeg，实现全平台、全部浏览器的兼容支持，经过内部和外部上万张图片的人眼浏览测试后发现，压缩后的图片和webp的清晰度对比没有差距

webp图片格式

谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器宽带资源和数据空间