你不知道的响应式

---

如今写网页需要兼顾众多设备终端，所以编写响应式页面是一个前端工程师必会的技能。什么是响应式？

很久很久很久以前，每个人都只有一件衣服（ Website ），不管你有钱没钱大家每天都只穿这一件。后来有人发明了舞会（移动互联网），大家都争先恐后地想要参加，于是一个做「开发」的裁缝忽悠人们说进舞会最好订做一件专门的礼服（ Mobile Site ），大家想想也对，上班和出去哈皮都穿同一件衣服多无聊啊，舞会就要有舞会的样子。于是乎只要有点闲钱的人都做了礼服，他和原来那件叫做 Website 的衣服是完全不一样的，面子不一样，里子也不一样。后来舞会的种类越来越多了，很多人被迫做了好多好多件礼服，于是又有一个叫做「前端」的裁缝站出来说你们每年要新做那么多衣服，多费钱啊，而且一出门钥匙啊皮夹子啊名片都要在不同衣服里换来换去多麻烦。你看，我们新发明了一个手艺叫做「Responsive Design」，只要把你原来那件衣服稍微那么一改，以后去哪个舞会都可以只穿这一件衣服，衣服的里子永远都差不多，但面子可以按照要求自适应不同的舞会。于是所有人都开始换上这种响应式的衣服了。。。
作者：JJ Ying
来源：知乎

---

响应式页面的诞生

1. 设计师给出 PC 设计稿和mobile设计稿
2. 前端工程师按照设计稿编写页面

---

编写响应式

1. 正交原则。即写HTML的时候不要管CSS，写CSS的时候尽量不要修改HTML，亲测这样可以避免逻辑混乱、代码混乱、各种混乱...

2. 坚守模块化编写。这就要求我们能正确理解原设计稿，深入理解它的意图和内容结构。按照某个标准进行分组，例如：代码块、页面块（按页面内容分模块）

3. 先实现一种界面，然后再在这个基础上去实现别的版本页面。关于在一定基础上实现另一套页面代码有几个亲测小技巧：

   • 加媒体查询（Media Queries），将其它版本的页面需要更改界面的地方的相应代码加进去。
   • 用弹性盒子（flexbox）布局。顾名思义，"弹性"就是伸缩性好，熟练使用flex布局，响应式开发必备技能。
   • 有时候可以专门为某个部分做两套代码，需要的时候显示（display：除none以外的）,不需要的时候隐藏（display:none）

4. 坚守尽量不要写死宽高的原则。例如：

• 一个块级元素的高度，我们可以用padding、line-height来达到预想效果。
• 宽度可以用max-width或者min-width设置。inline元素用最小、块级元素用最大。因为内联元素默认会往内缩，所以要给它设置一个最小的宽度才能有效控制它。块级元素反之。

5. 学会利用开发者工具，写CSS的时候先观察相应元素当前的状态，再对预想状态进行逼近。
6. 注意每一个元素的默认属性。默认属性是无形的，但是带来的影响是有形的。

---

一个简单的响应式页面

这是我写的一个响应式入门的页面例子，代码贯彻了上面的技巧，兼容PC/PC HD/Mobile/pad，可以模仿这种形式。
代码地址：https://github.com/chiang24/mydemos/tree/master/simplepage
预览地址：https://chiang24.github.io/mydemos/simplepage/simplepage.html

---

结束语

响应式说白了就是比普通的页面需要多注意以上几点，对于不懂的人来说听起来很高大上，好像是另一套内容，但是其实和普通页面没有很多区别。另外CSS没有逻辑，且细节特别多，简单但是麻烦，需要多看多写。不要考虑太多为什么，所见即真理。