所向披靡的响应式开发
时间：2019-08-21 来源：本站
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，自己也一直想清楚的去接触下响应式网站的开发，所以前段时间学习了该课程，满满的干货，碰巧慕课又搞了活动，今天就来和大家分享下。由于网上的资源实在是太多，所以文章中更注重开发流程的分享，技能知识点可能不够详细，大家若感兴趣，可以去搜索某个知识点，去阅读相关文档和标准。:)
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标准规定，应该通过 <html> 标签中的 lang 属性对每张页面中的主要语言进行声明，同时，也规定了lang 属性在以下标签中无效：<base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param> 以及 <script>。
meta标签：
课程中，对于响应式的处理，如规定视口大小，规定以醉新的IE浏览器来渲染，这些属性都用到了<meta>标签，所以，我们可以对<meta>标签进行全面的了解一下。
其定义和用法如下：<meta>元素永远位于文档的头部（head），该元素的属性定义了与文档相关联的名称/值对，可提供有关页面的元信息，添加页面关键词，有利于SEO。
其中，在XHML中，<meta>必须被正确的关闭；HTML中，<meta>没有结束标签。
在<meta>标签中，必须的属性为content属性，可选的属性为http-equiv、name、scheme，每个属性的具体情况大家有兴趣可以去查阅W3C文档标准。
viewport：
所谓viewport，就是视口的意思，分为PC桌面视口和移动端视口，在PC端中，viewport只有一个视口，就是主窗口的区域；而在移动端中，就有了三个视口的概念，分别是布局视口、可视视口、理想视口。
条件注释判断：
对于IE老旧的浏览器来说，响应式的设计在其上面的显示比较糟糕，为了提高用户体验，我们可以对于那些使用低版本的IE浏览器的用户进行友好提醒，使用条件注释判断是不错的选择。
观察分析页面结构，注意区域的划分：
在开始着手书写HTML结构的时候，我们应该先分析页面可以分为几个区域，哪些区域的代码可以复用，这样可以更好的稿效开发。
标签的语义化：
标签的语义化相信大家都很熟悉，语义化可以是我们更好的开发网站，在团队中更好的协作，同时也利于SEO等，例如，课程中就使用了header、footer、nav、article、section等HTML5语义化标签。
class和id的建议：
一般都是用class定义样式，id一般用于js快速的却别和获取元素，class一般都用中横线分隔，id一般都是用驼峰命名法。
img标签的建议：
对于必不可少的图片使用<img>引入，对于可有可无的装饰性图片可以使用样式中的background属性来引入。
工具样式 ： 所谓工具样式，就是我们提前写好一些样式，如清除浮动、文本对齐方式样式等，在我们需要的时候，直接使用其定义好的class名字即可，非常的方便。
相对单位rem和em :
我们先来看下em，em相对参参照物为父元素font-size，具有继承的特点，缺点是因为依赖父元素的大小，容易混乱；
rem的相对参照物为根元素html，固定不变。
其中，他俩在浏览器的默认设置中，1个em或者rem 都等于16px。
-HTML中的空白符：HTML中空白符会在某些浏览器（如chrome）中导致一些小BUG，导致元素之间存在间隙，如图：
，
解决办法有多种方案：如删除换行符、使用float、对父元素设置font-size：0、使用CSS4中的white-space-collapsing。
雪碧图的使用 ：
雪碧图就是将多个小图标合并到一张大图上，利用background-position属性和容器的宽高，就可以定位到想要的图标位置，优点就是可以更快速的加载图片。
width:calc()属性 ：
该属性是CSS3中的新增属性，简单的说，calc()可以进行计算，比如“width:calc(50% + 2em)”，这样一来你就不用考虑元素的宽度值到底是多少，浏览器会自动去计算出结果。
如何选择第三方组件 ：
对于第三方组件的选择，我们基本遵循以下几种原则：使用人数的多少、是否开源、文档是否齐全、活跃性、轻量级
5.移动端样式的实现
移动端样式实现的原理，就是利用了媒体查询功能。由于PC端的样式在前面的HTML和CSS样式的书写这一步骤中，我们基本就可以实现，移动端的样式，我们只需要利用@media属性基本上就可以实现。
@media属性：
前面我们已经提到，实现响应式网站的开发关键就是配合使用媒介查询@media这一属性，该属性是CSS3中的属性（早在CSS2中已经出现部分属性）。其语法相当于一个判断语句，可以理解为当满足某个条件的时候，去添加括号内的样式。
如何选择媒介查询的单位：
在媒体查询中，相对单位rem和em的基准高于html，所以与在html中设置的rem大小并不一致！这里的rem或em依然是：1rem=1em=16px。另外，rem兼容性不如em，故采用兼容性更好的em为媒体查询的断点单位。
5.兼容性处理
6.打包发布
7.总结
除了上述的建议和知识点，课程中还有其他小技巧，如利用CSS3选择器进行快捷的选择，清除浮动的几种方法等。
对于响应式网站的开发，其大致原理就是使用相对单位配合媒体查询属性，掌握原理后我们就需要去学习掌握相关知识点，然后由点到面的学习，实战课程不仅仅可以弥补我们相关技能知识的缺失，更重要的是开发思想，真切的体验开发流程，学以致用。正如课程中老师所总结的那样，前端技术更新快速，但是万变不离其宗，响应式网站的开发更多的是对CSS、HTML以及JS的理解和掌握，多阅读文档规范，多动手，努力跟上技术更新的步伐，才能运用自如。
醉后，短短的一篇文章，实在难以详细的分享该课程的所有知识点和思想，想了解@media属性和rem、em相对单位以及其他响应式开发的知识大家可以去搜索相关文章，获得更详细更标准的介绍。文采和知识水平有限，如有错误和不足，还请大家谅解，指出。
链接: https://pan.baidu.com/s/1NgOdrL2KzSegWyWbHVeGXg 提取码: qqqg 复制这段内容后打开百度网盘手机App，操作更方便哦