1. 响应式网站相关概念响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，自己也一直想清楚的去接触下响应式网站的开发，所以前段时间学习了该课程，满满的干货，碰巧慕课又搞了活动，今天就来和大家分享下。由于网上的资源实在是太多，所以文章中更注重开发流程的分享，技能知识点可能不够详细，大家若感兴趣，可以去搜索某个知识点，去阅读相关文档和标准。:)
学习一个知识，必须要对其认识透彻，掌握其基本的概念
- 什么是响应式网站 ：
响应式网站是一个设计理念，它是多项技术的综合体，大概包括三大技术成分： 流动网格、弹性布局、媒介查询等。
简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验。通过媒体查询，我们可以进行样式重构，对样式进行有选择的显示和隐藏。 - 优缺点 ：
任何东西都不是完美的，总是优缺点共存，响应式开发技术也不列外，其优点有节省开发时间和成本、面对不同设备分辨率的灵活支持和优雅展示、利于SEO等；缺点也很明显，如会加载更多的样式和脚本资源、设计比较难精确的定位和控制、兼容性的尴尬等。 - 如何编写 ：
响应式，实现原理就是使用相对单位并配合媒体查询来实现页面，我们只需要根绝设计图,将绝对单位px转换为相对单位rem或者em并配合@media即可，具体的编写开发流程，就是这篇文章的流程 - 需要什么样的技术 ：
基本的HTML 、CSS、Javascript 我们不必多言，除此之外， - 实践原则 ：
在设计实现中，遵循progressive enhancement（渐进增强）和graceful degradation（优雅降级）这两大基本原则，另外的，还需要根据项目要求来选择对某个设备进行优先设计，判断每个设备展示页面之间是否需要包含相同的内容，以及断点的选择，其中，断点的选择尤为重要，除特殊情况，如项目的要求，我们尽量不要对特定的设备进行选择和设计（如,针对红米2s进行设计一套页面） - 组织目录结构 ：
原则：约定优于配置、约定代码结构或命名规范来减少配置数量。
良好的目录结构有利于我们后面的书写。 - 有用的文件 ：
在标准的小型项目中，我们需要几个基本的页面，比如：404页面（以及其他错误页面）、rotots.txt、favicon.icon、humans.txt、.editorconfig、gitgnore、LICENSE.txt、README.md、CHANGELOG.md等文件以及markdown。 2.拿到设计图的我们该做些什么？
对于一个合格前端人员，我们在拿到设计图和需求的时候，我们要做的不是立马去敲代码，而是先去理性的分析和交流，该怎么做，怎么实现可以更好，实现的难易度等这些问题都是我们需要注意的。
- 和设计师交流网站如何交互
- 确定设计规范，如字体，间距，颜色等
- 设计稿的处理
- 布局结构分析
- 切图 4.开始编写HTML和CSS代码
前面的工作做好之后，我们便可以编写代码了，在这个过程中，我们需要注意的是，这里我们是先实现了PC端的样式，最后在实现的移动端的样式，对于先实现哪个，这就是前面说的要根据项目需求来确定，如果没有要求，一般的我们都是先实现PC端的样式。下面，我给大家分享了在这里我们都用到了哪些知识点、需要注意什么以及从某个属性中，我们是否可以掌握其它知识，从点到面的进行学习。其中，或许有些知识点对我们敲代码来说不是那么重要，但是全面掌握和了解W3C中的标准规范，可以让前端这个体系在我们脑海中更加稳固，这也是我的一种在学习体验，希望可以帮助到大家。:)
- lang属性：
翻阅W3C标准，对lang的介绍是这样的，HTML 的 lang 属性可用于网页或部分网页的语言。这对搜索引擎和浏览器是有帮助的。W3C标准规定，应该通过 标签中的 lang 属性对每张页面中的主要语言进行声明，同时，也规定了lang 属性在以下标签中无效：,
, ,