移动WEB开发之流式布局 ---京东移动端首页

步骤：

1. 技术选型

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

技术：布局采取流式布局

2. 搭建相关文件夹结构

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

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里面把精灵图等比例缩放为原来的一半
• 之后根据大小 测量坐标
• 注意代码里面background-size也要写： 精灵图原来宽度的一半
• ps里面不要保存缩放后的图片

原来精灵图大小为 400px 400px  缩放后的坐标为-81px  精灵图的size为200px  高度居中 

总结：

1.图片会自动和文字的基线对齐，设置了行高图片依旧不能垂直居中，这时候需要给图片加上

         vertical-align: middle;

2

.

 左边和右边用定位，中间是标准流，然后左右设置margin值，让他可以随着缩放而变化

3.

 这里的上面部分是用固定定位做的，这样才能随屏幕下滑跟着下滑，固定定位不占位置，要给宽度position:fixed;

4.

 这里的弧形红色背景是给 主要内容的盒子添加一个before伪元素，这里before要加定位，子绝父相，同时背景颜色嘛，z-index：-1；然后设置borde-radius：0 0 10% 10%就可以置于底层了

 这两个广告模块的用浮动来做，一开始我用的定位，但后来会出现各种问题，比如缩放的时候会覆盖....要用浮动！

 这里的模块 width分别是50% 25% 25%，但是每个图片之间有个小竖线，添加边框的时候会增加宽度，这时候用到CSS3的    box-sizing: border-box;

最后，在手机里面的特殊样式