========
优点：
-
减少工作量，网站、设计、代码、内容都只需要一份，多出来的工作量只是JS脚本和CSS样式的部分改动。
-
节省时间。
-
每个设备都能得到正确的设计。
-
帮助搜索优化。
缺点：
-
需要加载更多的样式和脚本资源。
-
设计比较难以精确定位和控制。
-
老版本浏览器兼容性不好。
响应式网站设计实践原则？
============
了解过响应式网站设计概念，在开始真实项目实践前，需要明确响应式网站设计的几个实践原则。避免我们因为基础不牢靠，导致错误的选型。
原则一：progressive enhancement 渐进增强 VS graceful degradation 优雅降级
渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3，但是 CSS3 特效太优秀不忍放弃，所以在高级浏览器中使用CSS3，而在低级浏览器只保证最基本的功能。二者的目的都是关注不同浏览器下的不同体验，但是它们侧重点不同，所以导致了工作流程上的不同。
渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
在相应式网站开发中题主是推荐优雅降级的原则，毕竟@media属性是css3中的新特新。
原则二：先针对大屏幕设计 VS 先针对小屏幕设计
与习惯和网站性质有关，没有对错，只有适合。对于支付理财类的项目，用户通常会选择在电脑上操作（有各种安全证书保障），这时可以先针对大屏幕设计。对于娱乐休闲类的项目，用户习惯在手机端操作，这就可以优先考虑小屏幕的设计。
原则三：如何选择浏览器进行开发阶段的调试
确定支持的浏览器，可根据各浏览器市场占比和公司实际业务情况，选择需要兼容的浏览器。若没有特殊情况，推荐在最新版本的chrome浏览器中进行开发，从chrome浏览器移植到其他浏览器时兼容性还是不错的。
原则四：如何选择媒体查询的断点
建议不要针对特定设备分割，而是针对屏幕尺寸进行分割。例如，
当然这个断点值的选取要根据设计稿进行调整。
原则五：如何取舍大小屏幕上的展现内容
不管设备大小，应该包含相同的内容 VS 根据设备大小不同，显示相同的内容。这就取决于产品经理啦。
响应式网站开发技术点详解
============
知识点一：单位的选择，px、rem、em
帮你彻底弄懂css中单位px、rem、em的区别，以及在响应式开发中不同单位最优的适用场景。
知识点二：@media媒体查询实例
针对不同屏幕大小，编写不同的页面样式，改用合适屏幕大小的排版和布局。
知识点三：响应式图片的实现
响应式图片不仅仅指图片的排版和布局，还包括根据设备大小加载不同的图片。在移动端设备上访问时，加载与用户设备相匹配的小图片，即快速，又不影响用户体验，也不会因为加载跟移动端不适配的高清大图导致用户流量出走。点击标题链接，将会介绍五种实现响应式图片的方法。
其他，前端开发基础知识点汇总
==============
在学习这套响应式开发教程的过程中，还涉及很多HTML和CSS相关的基础知识，整理如下：
display:inline-block元素之间空隙的产生原因和解决办法
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
总结一下这三次面试下来我的经验是：
-
一定不要死记硬背，要理解原理，否则面试官一深入就会露馅！
-
代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！
-
尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！
-
多刷面经！
我把所有遇到的面试题都做了一个整理，并且阅读了很多大牛的博客之后写了解析，免费分享给大家，算是一个感恩回馈吧，有需要的朋友【点击我】获取。祝大家早日拿到自己心怡的工作！
篇幅有限，仅展示部分内容
0b1c2376da47d727e0dc8a77e76478.png)
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
