02移动端布局基础之流式布局项目实战(京东移动端首页)

技术交流QQ群:1027579432，欢迎你的加入！

1.技术选型

• 方案：采取单独制作移动页面方案
• 技术：布局采取流式布局

2.搭建相关文件夹结构

3.设置视口标签以及引入初始化样式

```



```

4.常用初始化样式

```
body {
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    margin: 0 auto;
    font-size: 14px;
    font-family: -apple-system, Helvetica, sans-serif;
    color: #666;
    line-height: 1.5;
}
```

5.二倍精灵图做法

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

6.图片格式

• DPG图片压缩技术：京东自主研发推出DPG图片压缩技术，，经测试该技术，可直接节省用户近50%的浏览流量，极大的提升了用户的网页打开速度。能够兼容jpeg，实现全平台、全部浏览器的兼容支持，经过内部和外部上万张图片的人眼浏览测试后发现，压缩后的图片和webp的清晰度对比没有差距。
• WEBP图片格式：谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有jpeg的2/3，并能节省大量的服务器宽度资源和数据空间。

7.特殊样式

box-sizing: border-box;
-webkit-box-sizing: border-box;

-webkit-tap-hightlight-color: transparent;

-webkit-appearance: none;

img, a {
    -webkit-touch-callout: none;
}

8.资料下载

• 笔记及代码，欢迎star,follow,fork…