（50）流式布局—京东移动端首页制作案例

一、访问地址

多快好省，购物上京东！

二、技术选型

• 方案：我们采取单独制作移动页面方案
• 技术：布局采取流式布局

三、搭建相关文件夹结构

四、设置视口标签以及引入初始化样式

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0">
<!-- 引入移动端初始化css文件 -->
<link rel="stylesheet" href="css/normalize.css">
<!-- 引入自己写的首页的css文件 -->
<link rel="stylesheet" href="css/index.css">

 五、常用初始化样式

/* 给 body 进行样式初始化 */
body {
  min-width: 320px;
  max-width: 540px;
  margin: 0 auto;
  background-color: #fff;
  font-size: 14px;
  line-height: 1.5;
  font-family: -apple-system,Helvetica,sans-serif;
}

 六、特殊样式

/*点击高亮我们需要清除清除 设置为transparent 完成透明*/
*{
  -webkit-tap-highlight-color: transparent;
}
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
input{
  -webkit-appearance: none;
}
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }

七、二倍精灵图做法

7.1在firework里面把精灵图等比例缩放为原来的一半

默认情况下：该图片是400*400的尺寸，是二倍精灵图的尺寸。

 通过手动选中该位图，然后将宽高度除以2，进行缩放位图，然后锁定位图，防止发生变化。

7.2之后根据新的大小测量坐标

将量取后尺寸，增添一个负号，然后写入代码中即可。

7.3注意代码里面background-size也要写:精灵图原来宽度的一半

我们原始的图片是400*400，那么如果我们不设置background-size的话，它是按照400*400图片的尺寸进行精灵图的定位选择的，不是我们想要的，所以我们应该把尺寸改为200*200解决该问题。