响应式Web设计 - Fluid Grids Layout
em 一个em也是一个大小的单位，可以定义font-size的值大小。举个例子，如果 我们创建一个div包含font-size值为16px的文本，那么1em就代表16px，2em就等 于32px，依此类推。em在所有浏览器中是可变化的，不需要去为每一个元素设置 值，因为CSS具有继承特性，也就是“层叠”。
基于响应式开发网站，除了页面的布局是我们设计的重点， 网站 中显示的图片和文字也是我们不能轻视的内容。
响应式Web设计 - Fluid Grids Layout
如果你想内容能在所有尺寸屏幕上友好地显示，那就绝对有必要地 为移动设备优化字体，我们不能忽视指定字体来适应我们响应式网站。 我们可以使用不用单位标准来实现这个目标，包括pixel(像素)，em， rem或者是百分比。那么选择一个正确的标准对设计一个可塑的，响应 式的交互界面是至关重要的。
具体分析：
响应式Web设计 - Fluid Grids Layout
中间的主栏中加入两个div，这时候转换是这样吗？
220像素 ———— = 22.916667% 960像素
960像素
220px
220px
240px
460像素
240px
220像素 ———— = 47.826087% 460像素
响应式Web设计 - Fluid Grids Layout
响应式Web设计 - Fluid Grids Layout
rem
还有另外一个选择提供弹性字体大小的单位：rem（root(根) Em）。这个rem跟 em很相似，不同的是，rem只定义“父”元素的尺寸。这个重要的不同点可以解 决很多出现内嵌套的元素问题。大多数设计师都知道,绝大多数的设计本质上是包 含嵌套的元素；然而，现在需要意识到的是rem是一个很新的单位，因此不是所有 的桌面浏览器都支持，解释或者很好地显示它们，至少目前是这种情况的。
（根据用户需要为其提供不同图片，需要 服务器端编程）
作业讲解
作业讲解
响应式Web设计 - Fluid Grids Layout
固定像素布局不是RWD的未来，按比例划分布局才是 RWD的解决方案。
响应式Web设计 - Fluid Grids Layout
要解决前面网站的问题，真正转向响应式，还需要做很多工作。 使用比例宽度而不是固定宽度，将基于像素的布局转换为流式 网格布局。 设置默认字体大小为100%，这样页面的字体就能按比例缩放。 修正过宽的图像。
响应式Web设计 - Fluid Grids Layout
需要牢记的公式：
元素的大小，用像 素单位度量。
目标
上下文
= 结果
新的比例CSS规则 （一个百分数）。
包含元素的“上下 文”的大小，用像 素度量单位。
响应式Web设计 - Fluid Grids Layout
具体分析：
这里我们以960px为基准来计算。 导航、页眉、页脚都横跨整个页面宽度，因此 很容易计算。 240px 460像素 240px
响应式Web设计 - Fluid Grids Layout
百分比
类似em单位，百分比也是可变化的，可被继承的。理论上，两者是没有很大的 区别，都是计算单位。实际上，需要理解两者的区别是自己打算选择使用哪种计 算单位在你的设计上。你当然不想在指定的元素使用em，而在其他元素使用百分 比。例如，CSS声明： { font-size:100%; }，这样可以覆盖掉浏览器默认定义或者 其他不想要的百分比声明，在这里，可以使用em单位的。
响应式Web设计 - Fluid Images
最通用简单的方式：max-width
响应式Web设计 - Fluid Images
img { max-width:100% } img, object, embed, video { max-width: 100%; }
响应式Web设计 - Adaptive Images
响应式Web设计 - Fluid Grids Layout
现在解决了第一个问题，还需要做很多工作。 使用比例宽度而不是固定宽度，将基于像素的布局转换为流 式网格布局。 设置默认字体大小为100%，这样页面的字体就能按比例缩放。 修正过宽的图像。
响应式Web设计 - Fluid Grids Layout
响应式Web设计 - Fluid Grids Layout
前面介绍的4种字体的计算单位，究竟哪一种更加适合响应式Web设计呢？
确定的是，em使得字体更加容易缩放和维护。如果你打算，例如，使用百分比来 增加字体大小，你将可能去改变应用于body的百分比，而不用做其他操作。维护 是一个很大的问题，是值得你在设计中多多考虑到的。
响应式Web设计 - Fluid Images
真正具有响应性的Web设计是完全调整您的网站以满足访问者的设备。 我们需 要在响应式布局的页面上传送最佳的图片尺寸。 如果是背景图片，我们可以准备多张不同尺寸的图片，然后在各自的媒体查询 样式中使用对应的图片背景即可。再能结合 一些“min-width，min-height,maxwidth,max-height”等样式属性，来限制窗口最小或最大宽度和高度，模拟响应式 及流式布局，从而保证其图片不失真。 如果是在HTML中加载图片，实现图片在不同分辨率的屏幕上的适应，当然可 以通过设置图片样式的百分比来实现，但是，它不只是包括缩放，同样重要的是 减少你传送到观众的图片，比如说用户是处在移动设备中浏览您的网站，网速慢， 流量少等因素，可能访客会放弃您的网站！在开发时解决这样的问题可以通过一 些JavaScript插件实现。
具体Байду номын сангаас析：
中间的主栏不是浮动的，是利用页边距定位的。我们 可以更改页边距为百分数：
960像素
240px
460像素
240px
260像素 ———— = 27.083333% 960像素 250像素 ———— = 26.0416667% 960像素
响应式Web设计 - Fluid Grids Layout
响应式Web设计 - Fluid Grids Layout
Pixel(像素)
很早之前，Pixel（像素）就是被用作web设计的单位，原因就是它 本身固有的精密度和准确度。一旦字体赋具体的值，就能在所有设备 以及浏览器中保持相同的大小。虽然这种方法提供了非常精确的大小 控制，但它却与我们需要的弹性和响应式相违背的。当你给一个“父” 元素设置尺寸时，通过继承特性就会把尺寸“传递”给“子”元素(这 就是为什么把CSS命名为“层叠”样式表)。例如，设置一个固定的像 素值给body的font-size，然后就会把这个值“传递”给你设计的所有 其他元素。 现在，设备有各种各样的屏幕尺寸，也就是说不同的像素宽高的屏 幕。使用一个特定大小的字体来适应所有的屏幕，那是跟我们的响应 式设计相违背的。
响应式Web设计
响应式Web设计 - Media Queries
1、CSS3媒体查询
计算当前浏览器环境的某些方面（如窗口宽度、长宽比和方向等）， 来确定应用哪个CSS。
2、流式网格布局
对页面布局元素使用相对CSS比例而不是绝对大小。
3、流式图像和媒体
通过使用一些CSS技巧，使图像和媒体比例适应其浏览器的大小约束。
960像素
960像素 ———— = 100% 960像素
响应式Web设计 - Fluid Grids Layout
具体分析：
相对于包含上下文的960像素，左栏和右栏都为240 像素。要得到比例，可以计算如下：
960像素
240px
460像素
240px
240像素 ———— = 25% 960像素
响应式Web设计 - Fluid Grids Layout