1.响应式设计的要点是：媒体查询、流网格、弹性图像、非弹性布局或自适应布局。响应式和自适应最直观的区别是：自适应就是解决同一个网页在不同尺寸的设备上如何呈现。直观上，盒子会根据屏幕分辨率的大小进行缩放变换。所以在PC端和移动端浏览时，都是一样的设计模式，当然是比较差的体验。响应式设计解决了这个问题，即不同尺寸的设备、不同类型的设备显示不同的网页。具体区别在于不同尺寸或设备类型的设备加载不同的css。这里用的最多的css3中的@media属性就是mediaquery2.响应式设计实践原则渐进式增强（progressiveenhancement）渐进式增强（英文：Progressiveenhancement）是网页设计的一种策略，强调可访问性、语义HTML标记、外部样式表和脚本技术。渐进增强以分层方式使用Web技术，让每个人都可以使用任何浏览器或Internet连接访问网页的基本内容和功能，同时还向更高级的浏览器软件或更大带宽的增强版本提供这些页面的副本。优雅降级（gracefuldegradation）优雅降级，一句话：从一开始就构建完整的功能，然后对低版本浏览器做兼容。区别：优雅降级从复杂的现状开始，并试图减少用户体验的配置，而渐进式增强则从一个非常基本的工作版本开始，并扩展以满足未来环境的需求。退化（功能衰退）意味着向后看；渐进增强意味着向前看，同时将其根植于安全的地方。3.设置断点在css3中应用媒体查询属性。常用断点设置如下：（小屏）----（中屏）----（大屏）--0~480-------481~800-----801~1400小屏对应的是我们最常用的移动设备，也就是手机。中屏一般有平板电脑的视觉效果，而大屏就是我们平时用的笔记本或者大屏。4.一个原则：首先为大量用户设计。我们在设计的时候，一个原则就是，什么样的设备用户多，我们就先为它设计。设计完成后，考虑其他用例。抓住主要目标用户。5.相关单位vw,vh,em,remvw相对于窗口的宽度：窗口的宽度为100vwvh相对于窗口的高度：窗口的宽度为100vh这里要理解定义很重要窗口的缩小，避免陷阱，比如我们在手机上输入文字的时候，弹出键盘的时候，vh会缩小。这时候vh并不是约等于屏幕尺寸，而是手机键盘以外的部分。并非所有浏览器都与rem兼容。为了代码的健壮性，在css中写两行：font-size:16px;字体大小：1rem；6.常用的响应式框架脱离相应处理的前端框架，我们可以根据使用习惯和实际情况做出相应的选择：bootstrapfoundationssemanticUIPure.css（轻量级）
