响应式网站需掌握的基本知识以及项目实战总结

响应式与自适应的区别

 响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。1.自适应是为了解决如何才能在不同大小的设备上呈现同样的网页。2.响应式设计可以自动识别屏幕宽度，并作出相应调整的网页设计，布局和展示的内容可能会有所变动。

---

jQuery 2X 不在支持老旧ie浏览器ie8以下不支持。

---

项目轮播广告插件推荐

OwlCarousel2

api文档：

option

---

png图片在线压缩工具

tinypng

---

响应式图片

是HTML5的一个新元素；
如果元素与当前的,元素协同合作将增强响应式图像工作的进程，它允许在其内部设置多个标签，以指定不同的图像文件名，根据不同的条件进行加载；
可以根据不同的条件加载不同的图像，这些条件可以是视窗当前的高度（viewport），宽度（width），方向（orientation），像素密度（dpr）等；

当页面宽度 在320px到640px之间时加载minpic.png；当页面宽度大于640px时加载middle.png

<picture>    <source media="(min-width: 320px) and (max-width: 640px)" srcset="img/minpic.png">    <source media="(min-width: 640px)" srcset="img/middle.png">    <img src="img/picture.png" alt="this is a picture"></picture>

解决兼容性：
在页面引入js脚本 picturefill

---

结合响应式图片项目实例

---

---

webstorm2017使用技巧

div>p^div 结果：div包含p标签和下一个div是同级关系
（）是运算关系，先执行。