流式布局

流式布局（百分比布局）

也称为非固定像素布局（只针对于宽度）

通过将盒子的宽度设置为百分比，从而根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充

注意：制作过程中，需要定义页面的最大和最小支持宽度

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

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

若屏幕宽度 < 最小宽度时，用户需要通过拖动底部滚动条查看页面

京东移动端首页 m.jd.com

1. 搭建相关文件夹结构

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

<meta name="viewport" content="width=device-width,user-scalable=no,inital-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" />

3. 常用初始化样式

body {
    min-width: 320px;
    max-width: 540px;
    margin: 0 auto;
    background: #fff;
    font-size: 14px;
    font-family: -apple-system,Helvetica,sans-serif;
    line-height: 1.5;
    color: #666;
}

4. 特殊样式

/*css3盒子模型（给具体标签添加）*/
box-sizing: border-box;
-webkit-box-sizing: border-box;

/*点击高亮我们需要清除，设置为完全透明（点击高亮即在手机上点击时出现蓝色背景，例如点击链接时）*/
* {
    -webkit-tap-highlight-color:transparent;
}

/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
input {
    -webkit-appearance:none;
}

/*禁用长按页面时的弹出菜单*/
img,a {
    -webkit-touch-callout:none;
}

二倍精灵图的做法

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

   • 最好修改整个画布的大小
   • 步骤：菜单栏修改——画布——图像大小——修改尺寸——确定

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

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

   background: url(../images/sprite.png) no-repeat -59px -194px;/*调的X轴、Y轴的位置*/
   background-size: 104px auto;/*宽为原精灵图宽度的一半*/
   

图片格式

1. DPG图片压缩技术

京东自主研发，可节省用户近50%的浏览流量，极大的提升了用户的网页打开速度，能兼容jpeg，实现全平台、全部浏览器的兼容支持，压缩后的图片和webp的清晰度对比没有差异

2. webp图片格式

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