创建响应式布局-图片、自适应与响应式
响应式布局：
1、保有足够的留白，但也几乎不浪费屏幕面积
2、该考虑的内容：@百分比的布局以及em布局，随屏幕宽度变化的间距
@文本换行
@图片需被替换或允许缩放
@忍受一个不再完美的设计
自适应布局：
1、可在每个突变点上，为内容区域设置一个最大宽度，然后将外间距扩张直至匹配到下一个突变点
搜索框：
<input type="search" >
优点：
@移动浏览器可以更改所显示的键盘
@添加一个图标
@该区域被触发时，显示搜索历史
缺点：
@擅自更改样式，匹配系统样式
滑块：
注意事项：
@滑块对触摸良好
@尽量少的数据量或幻灯数量
@延迟的方法加载数据
链接：
1、至少34 * 34 px
2、目标之间 > 8px
响应式图片：
1、srcset属性 -- webkit ，chrome
1 <img src="" alt="" srcset="a.jpg 480w, b.jpg 768w" />
2、picture元素
1 <picture> 2 <source srcset=""> 3 <source media="(min-width : 480px)" srcset="" > 4 <img src="" alt=""> 5 </picture>
3、chrome支持webp格式的图片
4、<noscript>定义在脚本未被执行时的替代内容
5、图像压缩
@png 153kb
@gif 42kb
@jpeg 30kb
@webp 18kb --- 支持动画，有损，无损 --- chrome ，opera
