京东移动端首页制作

 

 

1 技术选型

       方案：我们采取单独制作移动页面方案

       技术：布局采取流式布局

2 搭建相关文件夹结构

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

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">

    <!-- 引入我们的css初始化文件 -->

    <link rel="stylesheet" href="css/normalize.css">

    <!-- 引入我们首页的css -->

    <link rel="stylesheet" href="css/index.css">

4 常用初始化样式

body {

    width: 100%;

    min-width: 320px;

    max-width: 640px;

    margin: 0 auto;

    background: #fff;

    font-size: 14px;

    font-family: -apple-system, 'Helvetica Neue', sans-serif;

    line-height: 1.5;

    color: #666;

}

5 二倍精灵图的做法

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

6 图片格式

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

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

链接：https://pan.baidu.com/s/1mLeA0qcX5JcpeHyq3ozTQg?pwd=ihjz 
提取码：ihjz