四、移动端开发方案

①单独制作移动端页面（主流） 京东商城手机版淘宝触屏版苏宁易购手机版

通常情况下，网址域名前面加 m(mobile) 可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。

②响应式页面兼容移动端（其次） 三星手机官网 apple手机官网

通过判断屏幕宽度来改变样式，以适应不同终端。但制作麻烦，需要花很大精力去调兼容性问题。

五、移动端技术解决方案

1. 移动端浏览器兼容问题

移动端浏览器基本以 webkit 内核为主，因此我们只需考虑webkit兼容性问题。我们可以放心使用 H5 标签和 CSS3 样式，同时针对浏览器的私有前缀只需考虑添加 webkit 即可。

2.移动端CSS初始化问题

移动端 CSS 初始化推荐使用 normalize.css。

Normalize.css：保护了有价值的默认值，修复了浏览器的bug ，是模块化的，拥有详细的文档。官网地址： http://necolas.github.io/normalize.css/ 5.2 CSS初始化

3. 移动端CSS3 盒子模型问题

①传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding

/* 传统盒子模型 */ box-sizing: content-box;

②CSS3盒子模型：盒子的宽度 = CSS中设置的宽度width ，里面包含了 border 和 padding，也就是说，我们的CSS3中的盒子模型中padding 和 border 不会撑大盒子

/*CSS3 盒子模型 */ box-sizing: border-box;

移动端可以全部使用CSS3 盒子模型；PC端如果完全需要兼容就用传统模式，如果不考虑兼容性就选择 CSS3 盒子模型。

4.移动端中一些特殊样式

/*CSS3 盒子模型 */ 
box-sizing: border-box; 
-webkit-box-sizing: border-box; /* 点击高亮我们需要清除清除，设置为transparent透明 */ 
-webkit-tap-highlight-color: transparent; /* 在移动端浏览器默认的外观在 iOS 上加上这个属性才能给按钮和输入框自定义样式 */ 
-webkit-appearance: none; /* 禁用长按图片、标签时的弹出菜单 */ 
img,a { -webkit-touch-callout: none; }

六、移动端常见布局

1 . 单独制作移动端页面（主流）

流式布局（百分比布局）、flex 弹性布局（强烈推荐）、less+rem+媒体查询布局、混合布局

2. 响应式页面兼容移动端（其次）

媒体查询、bootstarp

移动端开发之流式布局：

一、基础

流式布局，就是百分比布局，也称非固定像素布局。通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。流式布局方式是移动web开发使用的比较常见的布局方式。

max-width 最大宽度（max-height 最大高度） min-width 最小宽度（min-height 最小高度）

二、制作京东移动端首页案例

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 { margin: 0 auto; min-width: 320px; max-width: 640px; background: #fff; font-size: 14px; font-family: -apple-system, Helvetica, sans-serif; line-height: 1.5; color: #666; 
}

5.二倍精灵图做法(注意)

①在PS里面把精灵图等比例缩放为原来的一半(Ctrl+T)。千万不要保存，否则会修改精灵图的大小，我们只是为了测量缩放后的坐标而已。

②测量所需要图片在缩放后精灵图中的坐标x、y。background: url( ) no-repeat x y;

③将代码里面background-size修改为精灵图原来宽度的一半，高度设置为auto。

6. 图片格式

①DPG图片压缩技术

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

② webp 图片格式

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