技术交流QQ群:1027579432,欢迎你的加入!
1.技术选型
- 方案:采取单独制作移动页面方案
- 技术:布局采取流式布局
2.搭建相关文件夹结构
3.设置视口标签以及引入初始化样式
```
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/index.css">
```
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.特殊样式
<!--CSS3盒子模型 -->
box-sizing: border-box;
-webkit-box-sizing: border-box;
<!-- 点击高亮我们需要清除,设置为transparent完成透明 -->
-webkit-tap-hightlight-color: transparent;
<!-- 在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式 -->
-webkit-appearance: none;
<!-- 禁用长按页面时的弹出菜单 -->
img, a {
-webkit-touch-callout: none;
}
8.资料下载