流动布局

流式布局就是百分比布局，通过将盒子的宽度设置成百分比，从而根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。也称为非固定像素布局，是移动web开发常用的布局方式。

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

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

常用初始化样式

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 Neue', sans-serif;
    color: #666;
}

特殊样式

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

之后，除了盒子宽度是按百分比设置之外，其余跟PC端类似设置。
一些小的知识点：

图片类似于文字也可以通过设置行高，来使其在盒子中垂直居中显示，但是是以基准线来居中的，图片过大的时候会看到图片并不居中。这时候可以设置vertical-align: middle;来使其居中显示
父盒子相对定位，左右固定宽度盒子分别左右绝对定位，中间盒子不设置宽度，那么中间盒子宽度就会随父盒子宽度改变而改变
对于小图片，我们一般使用小元素的backgroud属性，设置好width,height。假如图片比盒子大，我们再使用backgroud-size：width height;属性对背景图大小进行设置

<input type="search" placeholder="搜索文本">

二倍精灵图处理

在firework里面把精灵图等比例缩放（修改宽度）为原来的一半，之后根据新的大小，测量坐标。注意，代码里面的background-size也要写精灵图原来宽度的一半。

background-color: transparent;

设置背景颜色为透明

线性渐变背景

在MDN网站developer.mozilla.org/zh-CN/ 中可查得background-image相关资料，以及相关联的资料。找到自己需要的liner-gradient渐变函数即可。

background-image: linear-gradient(to top, #f00, #0f0 75%, #00f);/*从下往上显示 中间#0f0 75% 下#f00和上#00f都是25%*/

滑动轮播布局

父盒子设置overflow: hidden;轮播图使用绝对定位，图片有依次设置left: 100%，left: 200% left: 300% left: 400% left: 500%。设置背景圆角background-radius

图片格式

DPG图片压缩技术。京东自主研发了DPG图片压缩技术，可直接节省用户进50%浏览流量，极大的提升用户的网页打开速度。能够兼容jpeg，实现全平台、全部浏览器的兼容支持，压缩后的图片与webp的清晰度对比几乎没有差距。
谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，能大量节约带宽资源和数据空间。

nav标签

nav 标签定义导航链接的部分，是 HTML 5 中的标签。

流动布局（百分比布局）