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%，里面分几部分，给每部分一个相应的百分比宽度即可。