1.移动端浏览器兼容问题。
移动端浏览器基本以 webkit 内核为主，因此我们就考虑webkit兼容性问题。
我们可以放心使用 H5 标签和 CSS3 样式。
同时我们浏览器的私有前缀我们只需要考虑添加 webkit 即可。
2.移动端公共样式
这里推荐使用
官网地址
我们在传统模式里宽度计算是：盒子的宽度 = CSS中设置的width + border + padding
在css3盒子模型： 盒子的宽度= CSS中设置的宽度width 里面包含了 border 和 padding
也就是说，我们的CSS3中的盒子模型， padding 和 border 不会撑大盒子了。
注意：移动端可以全部CSS3 盒子模型，PC端如果完全需要兼容，我们就用传统模式，如果不考虑兼容性，我们就选择 CSS3 盒子模型。
这里在介绍一些除去移动端特有的特殊样式的方法，更多的结合百度进行解决哟。
移动端单独制作：
流式布局（百分比布局）flex 弹性布局（强烈推荐）less+rem+媒体查询布局混合布局
响应式：
媒体查询bootstarp
流式布局：
流式布局，就是百分比布局，也称非固定像素布局。
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
流式布局方式是移动web开发使用的比较常见的布局方式。
京东手机端案例练习：
1.先将项目环境搭建好。
img用于存放背景图，upload用于存放产品图片等。
给body结合具体需求方案添加默认样式，以及其他一些标签默认样式。
2.制作首页头部app部分。
html部分：
css部分：
这里是建一个大盒子做容器，宽度继承父级body为100%，给一个固定高度，里面分为四个部分，用一个ul下面四个li设置浮动就可以一行，每个里设置各自的宽度百分比，居中对齐，垂直对齐，还有调整图片的对齐方式，等等即可。
3.制作搜索栏部分
html部分：
css部分：
这一部分结构是一个大盒子里先分为三部分，中间一个部分在分为三个部分。
这里有一个难点，二边部分是固定的，中间部分是自适应式的，我们的方法是将二边用绝对定位脱离普通流，然后给让中间部分宽度和父级一样是100%，但是设置左右margin值，这样就可以将中间部分挤到中间来，这样就可以实现了这种效果。
这里还运用到了精灵图来实现放大镜的图标，结合手机端的二倍图，我们要先将精灵图等比例缩小到2倍，在量精灵图中放大镜的位置，页面中也要讲图片缩小，这样在手机端图像显示就会很清晰正常。
4.主题内容部分
html部分：
css部分：
这里滑动图要js，用一张图代替，图片宽度设置为100%，即可。
nav导航部分是由10组的图标文字组合而成，具体介绍一组，其他一样布局，然后将这些组左浮动，图标文字不同啦，用一个a标签包含img标签以及span标签，在img标签里放图标，span标签放文字，每一个a标签宽度都设置为20%，里面的img标签宽度固定，给上面margin值，与下面文字隔开，span标签转换为块状元素即可。
下面品牌日，是三个部分组成，也是三张图片，给三个部分的div设置宽度为33.33%,左浮动成一行，里面图标宽度设置成100%跟随父级一样大即可，对啦，要用a标签将img标签包裹起来哟。
在下面的部分跟这练习的几个部分差别不大，有兴趣可继续往下做，大多都是最大盒子是继承body宽度为100%，里面分几部分，给每部分一个相应的百分比宽度即可。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery