响应式编程笔记

响应式编程笔记：
目前手机市场暂用笔记非常的高，而如果你不会响应式编程的话，手机适配性将会相当的差。
我们需要做到：让你的内容能在任何设备上呈现。
chrome开发者工具有模拟器，可以模拟我们平常需要的设备。
还可以真机演示，android手机使用方法：http://www.css88.com/doc/chrome-devtools/remote-debugging/?q=
还可以使用apache，将我们做的网页放在apache下，通过apache服务器可以访问这些文件。

———————我是分割线——————————-

视窗：浏览器能够显示内容的区域。
浏览器不是根据显示器像素宽度而工作的。而是根据DIPS（设备独立像素）宽度来决定的。
DIPs将像素值与实际距离联系起来。
视窗宽度css像素数=实际像素/DPR（像素比）决定的

———————我是分割线——————————-

一个典型的针对移动端优化的站点包含下面内容：

width为视图窗口宽度，可以设为500（确切像素数），也可以设置为device-width，这个值表示比例为100%屏幕宽度的CSS像素值。

———————我是分割线——————————-

max-width防止溢出

———————我是分割线——————————-

从最小到大的设计，将最重要的内容展示在页面上。
从小的东西开始有更大的好处就是会考虑性能问题。

———————我是分割线——————————-

媒体查询，断点：当页面在某个大小的时候样式会有些变化（字体变大，间距变大），这个就是断点。

———————我是分割线——————————-

flexbox是一个解决弹性框项目的属性

练习地址：
流动布局：
https://github.com/sunhuwh/front_end_workspace/tree/master/pattern-mostly-fluid-quiz-blankcss
移动端适配：
https://github.com/sunhuwh/front_end_workspace/tree/master/RWDF%20L2%20Start