安静的粉丝

• 要能够看清自己是如何成功的，又能看明白这个过程中会遇见什么样的障碍和问题，并提前做好准备。单靠激情、热情其实是打动不了投资人的。
• 融资时要在提前进行好融资，不要到了最后关头才着急地拉融资
• 在线教育只是简单地将线下教育搬到线上，并不是一个好的商业模式
• 社交创业并不是没有机会了，但是确实死亡率比较高，比其他的任何行业来说，社交只适合偏执狂的创业者。

我自己个人的成长经历比较特殊，在 18 岁前看过的所有书籍，不论是课内、还是课外书，不超过 10 本。

此外，我在高中时，为了还清在地下钱庄欠下的债务还休学了一年。当我复学后，开始意识到要努力变强时，我一直想 “后发先至” 追上我当初虚掷的光阴。坦白说，我也被知识恐慌症困扰了许多年。

而这 25 年来，我对知识恐慌有了新的解法。

学海无涯！一个人即使不吃不喝不休息 24 小时不间断，终其一生也读不完所有资讯！

在这边给大家看几个数字：

1. 纽约时报一天的讯息量 = 17 世纪一个人一辈子竹讯息量总和。

2. 网上的讯息量一天至少 1000 万个中文字，最高一天目前的流量是 200 亿个汉字讯息量。这还不包含外国人的英文字讯息量。

3. 现在每两天产生的数据 = 人类会写字以来至 2003 年的总累积数据量。

4. Youtube 每天上传的影片，要花你 15 年才看得完。

5. 全世界每天有 2500 亿封以上的 email，其中 80% 是垃圾信件。

6. 跟你说完这些资料也没有什么意义！

因为说完后，每一秒的数据又增加了，这些东西，同时也又变成历史事件了。

结论就是：现在的新科技与互联网一直不断进化，数据量只会愈来愈多，即便是一目十行过目不忘的人终其一身也学不完。

所以，知识恐慌症的你我，第一个核心问题就应该改成：“你是谁？你想成为什么样的人？”

如果你想成为世界级的牛人，那你就需要持续大量且全面的阅读与学习，享受在知识恐慌症下的高速成长。

这是你的人生使命，高度愈高，面临的压力自然愈大。这次天命，无人可以取代你的梦想，所以

Enjoy what you like and don’t complain.

如果想要拥有不错的工作收入，然后过好你自己的人生，那就应该着力在如何建构自己不可取代的竞争力，投资自己，找到 3~5 个核心技能，不断深耕即可，滴水穿石，这样你的竞争力就会显现。

不要抱持怀胎一个月就能生出孩子这件事。过度取巧取速，有时欲速则不达。

MJ 的一生对创业充满萝想，我自己也下海搞了几次，有的失败有的成功，过程中都甘之如饴，为了能让创业的概率成功一点，我对任何商业的知识（产销人发财）、领导、沟通、商模、亲子教育、古迹学与历史或艺术天天都会杂读一点，因为没准那天就会用上了。

所以天天读上一小时的书，什么书都看，百无禁忌乐此不疲。现在的我，比较少出现知识恐慌症的问题，因为我知道自己要去的方向。

所以，先搞清楚 “你是谁? 你想成为什么样的人?” 。

有了方向，再决定要如何朝这个向前进与学习，就像汪洋大海只取一瓢饮，学海无涯，你不可能什么都要。

有了 Trade-off 取舍的观念，你的知识恐慌症状可能可以减轻不少。

如果说到这里，你的症状还是未减，那我来分享我的学习方法，请注意，这些仅仅是我的个人经验，提供给各位参考。

一次读 100 本书

首先，我会同时一次读 100 本书。

是这样的，我曾经在 30 多个国家与世界不同的高手谈生意，意外发现，不同国家厉害的人，都有一个共通点：连结能力特别强！

也就是风马牛不相关的东西，同时出现在他们大脑里时，可以变出一个成功的商业机会与模式。

几年后我又多读了点书才了解，原来是因为大脑天生的构造使然，人脑有 860 亿个神经元，神经元大约有四种功能区，包含接收区、触发区、传导区，和输出区，因为我刻意同时阅读 100 本完全不同的领域的知识，不同的知识型态（财务、历史、运动、领导、亲子教育等等等）会牵动不同类型的神经元。

原本这些神经元都是分开作用的，但我可能同一天看了 10 本不同的书籍各 5 页，第二天又同时看了另外 15 本 不同书籍各 8 页，一直持续下去…… 然后可能在第 10 天突然间这 100 本书的内容，就在我脑海中自己对话起来了。

这感觉有点像 100 个不同作者一起交流对话，然后神经元就被触发并连接到其他的神经元一样，所以我的鬼点子几乎天天源源不绝。

这种一次读 100 本不同类型书籍的好处是：让你能够快速在不同领域穿越与跨界，这刚好是这个时代最需要的能力之一。

但有一个小小的坏处，那就是我的家与办公室到处都随手放了很多书本。

精读

第二个方法是，每一本书无论主题，都采用精读。

为什么呢？其实我也学过速读，后来发现这个方法不适用我。因为 10 多年国际销售主管的经历，我面对的都是当地牛逼的高手，而高手和高手之间的差异就在细节！

以前的我喜欢速读，但只能留下大约的印象，当我需要与海外各国高手交流时，才发现这些速读留下的印象，只能让我浅谈一些表面的题目，当需要我加大力度表达我的洞见 insight 时，却说不出什么好论点，然后就 “掉漆” 了，令人感觉特别不靠谱。

几次挫折后，我要求自己采用精读方式。后来自己的职场表现就愈来愈好，因为针对每个不同的议题，我都能提上几个别人没有的洞见，而这些洞见还帮公司赚了好几亿的净利。

加上后来我自己也出书了之后，才发现一个作者要出一本书，至少要花一个月到数个月不等的时间，身为读者的我们，只用 1 小时速读，除了少数的神人之外，多数人都只是学到皮毛中的皮毛，这样实在太可惜了。

相同主题的书

此外，在研究某个特定主题时，我会买下至少十本相同主题的书一起阅读。

因为这样我就能在最短时间，看到十个以上不同专家的意见，就像请了 10 个高手级随身家教指导我一样，让我能快速产生自己的洞见。

写一本书

世界知名的英国宇宙科学家霍金 Stephen Hawking 曾说过：

最好的学习就是自己写一本书。

因为为了支持你的论点，你会到处找资料，研读资料，最后形成自己的洞见，只有在你产生自己的洞见后，才算真正学习到一项技能。

我非常同意这个观点，同时，我也写下了两本书实践了这个方法。

总结

过去 300 年人类历史上的重大科技突破里程分别是：

• 1776年的蒸气机

• 1837年的电报

• 1927年的电话

• 1971年的email

• 1993年的internet

• 2007年的移动互联网

如果用比较长的时间轴来看这些科技的发展，你会发现过去的科技发展的模式一开始是 “机械过程” ，是具有可预测性的；接着变成 “有机过程” 的不具有可预测性，因为在有机过程中会长成什么样子没有人知道；现在则变成 “混沌过程” ，不但长成什么样子没有人知道，而且会长多大也没有人可以完全猜得准。

就是因为现在的世界发展没有专家猜得准，所以最好的方式就是持续精进，保持弹性，多学一点不同的东西，然后 “逐梦踏实” 、一步一脚印，就像堆积木一样，一块块堆出自己的核心能力。

重点是最重要的那四个梁柱（四个核心能力），一定要很紥实，不能全部采用速读速学法，最核心的东西采用速成法，就会好像用海沙建构自己的核心梁柱。

人生还很长，你为自己建造了一个富丽堂煌的海沙屋，这样就危险了。

转自：http://www.cnblogs.com/constantince/p/5708930.html

前言

随着移动设备的普及，移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁，手机厂商繁多，导致的问题是每一台机器的屏幕宽度和分辨率不一样。这给我们在编写前端界面时增加了困难，适配问题在当下显得越来越突出。记得刚刚开始开发移动端产品的时候向设计MM要了不同屏幕的设计图，结果可想而知。本篇博文分享一些卤煮处理多屏幕自适应的经验，希望有益于诸君。

特别说明：在开始这一切之前，请开发移动界面的工程师们在头部加上下面这条meta:

1

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

所谓宽度自适应严格来说是一种PC端的自适应布局方式在移动端的延伸。在处理PC端的前端界面时候需要用到全屏布局时采用的就是此种布局方式。它的实现方式也比较简单，将外层容器元素按照百分比铺满地方式，里面的子元素固定或者左右浮动。

1
2
3
4
5
6
7
8
9

.div {
  width:100%; height:100px;
}
.child {
  float: left; 
}
.child {
  float:right;
}

大小之辨-完全自适应

“完全自适应式”是卤煮对越此方案的叫法，由于卤煮现在找不到官方名称，所以暂时就这样叫它。这种解决方案相对前一种来说进步不少，不仅仅宽度实现了自适应，而且界面所有的元素大小和高度都会根据不同分辨率和屏幕宽度的设备来调整元素、字体、图片、高度等属性的值。简单来说就是在不同的屏幕下，你看到的字体和元素高宽度的大小是不一样的。在这里，有人就会说利用的是媒体查询属性，根据不同的屏幕宽度，调整样式。卤煮之前也是这样想的，但是你需要考虑到界面上的许多元素需要设置字体，如果用media query为每个元素在不同的设备下都设置不同的属性的话，那么有多少种屏幕我们的css就会增加多少倍。实际上在这里，我们采用的是js和css属性rem来解决这个问题的。

REM属性指的是相对于根元素设置某个元素的字体大小。它同时也可以用作为设置高度等一系列可以用px来标注的单位。

1
2
3
4
5
6
7
8
9

html {
 font-size: 10px;
}
div {
 font-size: 1rem;
 height: 2rem;
 width: 3rem;
 border: .1rem solid #000;
}

1
2
3
4

<!--iphone5-->
html {
 font-size: 100px;
}

那么以此为基准，可以计算出一个比例值6.4。我们可以得知其他手机分辨率的设备下根元素字体大小:

1
2
3
4
5
6
7
8

/*
数据计算公式 640/100 = device-width / x  可以设置其他设备根元素字体大小
ihone5: 640  ： 100
iphone6: 750 : 117
iphone6s: 1240 : 194
*/
var deviceWidth = window.documentElement.clientWidth;
document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';

在head中，我们将以上代码加入，动态地改变根节点的font-size值，得到如下结果:接下来我们可以根据根元素的字体大小用rem设置各种属性的相对值。当然，如果是移动设备，屏幕会有一个上下限制，我们可以控制分辨率在某个范围内，超过了该范围，我们就不再增加根元素的字体大小了:

1
2

var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;
document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';

一般的情况下，你是不需要考虑屏幕动态地拉伸和收缩。当然，假如用户开启了转屏设置，在网页加载之后改变了屏幕的宽度，那么我们就要考虑这个问题了。解决此问题也很简单，监听屏幕的变化就可以做到动态切换元素样式:

1
2
3
4

window.onresize = function(){
      var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;
      document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';
 };

为了提高性能，让代码开起来更加完美，可以为它加上节流阀函数:

1
2
3
4

window.onresize = _.debounce(function() {
      var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;
      document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';
}, 50);

顺带解决高保真标注与实际开发值比例问题

如果你们设计稿标准是iphone5，那么拿到设计稿的时候一定会发现，完全不能按照高保真上的标注来写css，而是将各个值取半，这是因为移动设备分辨率不一样。设计师们是在真实的iphone5机器上做的标注，而iphone5系列的分辨率是640，实际上我们在开发只需要按照320的标准来。为了节省时间，不至于每次都需要将标注取半，我们可以将整个网页缩放比例，模拟提高分辨率。这个做法很简单，为不同的设备设置不同的meta即可:

1
2

var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

这样设置同样可以解决在安卓机器下1px像素看起来过粗的问题，因为在像素为1px的安卓下机器下，边框的1px被压缩成了0.5px了。总之是一劳永逸！淘宝和网易新闻的手机web端就是采用以上这种方式，自适应各种设备屏幕的，大家有兴趣可以去参考参考。下面是完整的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<!DOCTYPE html>
<html>
<head>
  <title>测试</title>
  <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
  <script type="text/javascript">
(function() {
  // deicePixelRatio ：设备像素
  var scale = 1 / devicePixelRatio;
  //设置meta 压缩界面 模拟设备的高分辨率
  document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
  //debounce 为节流函数，自己实现。或者引入underscoure即可。
  var reSize = _.debounce(function() {
      var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;
      //按照640像素下字体为100px的标准来，得到一个字体缩放比例值 6.4
      document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';
  }, 50);
 
  window.onresize = reSize;
})();
  </script>
  <style type="text/css">
    html {
      height: 100%;
      width: 100%;
      overflow: hidden;
      font-size: 16px;
    }
 
    div {
      height: 0.5rem;
      widows: 0.5rem;
      border: 0.01rem solid #19a39e;
    }
 
    ........
  </style>
  <body>
    <div>
    </div>
  </body>
</html>

让元素飞起来-媒体查询

运用css新属性media query 特性也可以实现我们上说到过的布局样式。为尺寸设置根元素字体大小:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

@media screen and (device-width: 640px) { /*iphone4/iphon5*/
    html {
        font-size: 100px;
      }
    }
 
@media screen and (device-width: 750px) { /*iphone6*/
    html {
        font-size: 117.188px;
      }
    }
    @media screen and (device-width: 1240px) { /*iphone6s*/
      html {
        font-size: 194.063px;
      }
    }

这种方式也是可行的，缺点是灵活性不高，取每个设备的精确值需要自己去计算，所以只能取范围值。考虑设备屏幕众多，分辨率也参差不齐，把每一种机型的css代码写出来是不太可能的。但是它也有优点，就是无需监听浏览器的窗口变化，它会跟随屏幕动态变化。媒体查询的用法当然不仅仅像在此处这么简单，相对于第二种自适应来说有很多地方是前者所远远不及的。最明显的就是它可以根据不同设备显示不同的布局样式！请注意，这里已经不是改变字体和高度那么简单了，它直接改变的是布局样式！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

@media screen and (min-width: 320px) and (max-width: 650px) { /*手机*/
  .class {
    float: left;
  }
}
 
@media screen and (min-width: 650px) and (max-width: 980px) { /*pad*/
  .class {
    float: right;
  }
}
 
@media screen and (min-width: 980px)  and (max-width: 1240px) { /*pc*/
  .class {
    float: clear;
  }
}

此种自适应布局一般常用在兼容PC和手机设备，由于屏幕跨度很大，界面的元素以及远远不是改改大小所能满足的。这时候需要重新设计整界面的布局和排版了:

如果屏幕宽度大于1300像素 如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。 如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。 许多css框架经常用到这样的多端解决方案，著名的bootstrap就是采用此种方式进行栅格布局的。

总结

不管哪一种自适应方式，我们的目的是使得开发网页在各种屏幕下变得好看：如果你的项目定位的用户群仅仅是使用某种机型的人，那么可以采用第一种自适应方式。如果你的客户主要是移动端，但是客户的设备类型庞杂，建议采用第二种方式。如果你雄心勃勃地需要建立一套兼容PC、PAD、mobile多端的一体化web应用，那么第三种选择显然是最适合你的。每种方式都有自己的利弊，根据需求权衡利害，合理地实现自适应布局，需要不停的实践和摸索。路漫漫其修远兮，吾将上下而求索。