流式布局（百分比布局）#
https://www.bilibili.com/video/BV14J4114768/?p=402- 流式布局，即百分比布局，也称非固定像素布局
- 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
- 流式布局是移动web开发使用的比较常见的布局方式。
- max-width 最大宽度（max-height 最大高度）
- min-width 最小宽度（min-height 最小宽度）
最大宽度1000px
最小宽度700px
京东移动端首页#
-
技术选型
- 方案：采取单独制作移动端页面方案
- 技术：布局采取流式布局
- 搭建相关文件夹结构
- 设置视口标签以及引入初始化样式
-
常用初始化样式
body{margin:0 auto;;min-sidth:320px;max-width:640px;background:#fff;font-size:14px;font-family:-apple-system,Helvetice,sans-serif;line-height:1.5;color:#666;}
-
二倍精灵图做法
- 在fireworks里面把精灵图等比例缩放为原来的一半（不用保存，若保存了会修改原图）
- 之后再根据大小测量坐标
- 注意代码里面background-size也要写：精灵图原来宽度的一半
-
图片格式
DPG图片压缩技术#
京东白主研发推出DPG图片压缩技术，经测试该技术，可直接节省用户近50%的浏览流量，极大的提升了用户的网页打开速度，能够兼容jpeg，实现全平台、全部浏览器的兼容支持，经过内部和外部上万张图片的人眼浏览测试后发现，压缩后的图片和webp的清晰度对比没有差距。
webp图片格式#
谷数开发的一种旨在加快图片加载速度的图片格武，图片压缩体积大约只有们jpeg的2/3 ,并能节省大量的服务器宽带资源和数据空间