响应式布局

http://www.runoob.com/css/css-rwd-viewport.html

http://www.cnblogs.com/2050/p/3877280.html

https://classroom.udacity.com/courses/ud893/lessons/3533879576/concepts/36334885380923

响应式网页会基于设备的特征而变化，也就说你的网页需要在不同的设备上应用不同的样式，有几种办法可以有选择性的应用CSS代码，最简单的是使用媒体查询，媒体查询提供了简单的逻辑方法来根据不用的设备特征应用不用样式，比如设备的宽度、高度或者像素比，你可以修改所有内容。从背景图到页面布局，甚至其他的任何设备。添加响应式样式很简单，只需要在你的页面里添加另外的样式表，并附上媒体查询。

https://medium.com有几个断点

http://udacity.github.io/RWDF-samples/Lesson3/media-queries/min-max-width.html

https://classroom.udacity.com/courses/ud893/lessons/3581758575/concepts/35085403970923

布局大体分为四类：流动模型，掉落列模型，活动布局模型，画布溢出模型。

 

.box{display:flex;flex-wrap:wrap;}

 

 

 

http://udacity.github.io/RWDF-samples/Lesson4/patterns/off-canvas.html

http://udacity.github.io/RWDF-samples/Lesson4/patterns/off-canvas.html

响应式图片

 

你行要一张图片响应式铺满，视图区域的整个高度？现在你可能经常设置图片高度为100%，不过这个只在HTML的高度下起作用。而且body元素的高度也同样被设置为100%，一个简单的方法是使用VH单位，是视图高度的缩写，一个VH单位对应着1%的视图高度，因此100VH对用着100%的高度，你也可以同样使用VW为视图宽度。你可以设置图片的宽度为100VW。

另一种常见的响应式用例是当你想要调整图片尺寸去适应视图区域较小的高度或宽度时，可以使用vmin单位使得视图区域最小的，如果你将宽度和高度设置为100vmin，你会得到之后的影响。vmax

 

https://classroom.udacity.com/courses/ud882/lessons/3483659506/concepts/35901485350923

 

响应式table

响应式字体