学步园

上集回顾：

昨天讲了页面如何根据不同的设备尺寸做出响应。主要是利用了@media命令以及尺寸百分比化这两招。

 

上集补充：

其中，利用以下CSS设置让图片或视频大小不超过设备屏幕的宽度：

img, object{
max-width:100%;
}

这一语句一般加在@media screen and (max-width:481)的判断内，主要是让手机用户在查看网页时图片不至于比手机屏幕还大。

这一招在《Head First Moblie Web》中被称为“Fluid Image Technique”。

 

视频能够做成响应式吗？

除了图片以外，还有一种常见的多媒体形式是视频。有时在web设计中，根据需要会在页面中加入视频，一般视频都是上传到youtube、土豆/优酷、新浪等网站上后，再用链接的形式加入到我们的网页中。

为什么在iphone上看不到youtube视频？（在境外）

在IOS上查看网页视频时，在不越狱安装插件的情况下，是没法看flash格式的视频的，因为iphone上的浏览器不支持Adobe Flash，这跟苹果等公司的商业竞争政策有关，咱也没办法。对于这一问题，使用youtube视频源的web设计有一个解决方案，就是将原来嵌套在网页中的object embed格式的代码段替换成新的代码段。

如，旧的页面嵌套代码段为：

<object width="230" height="179" type="application/x-shockwave-flash" 
data="http://www.youtube.com/v/O-jOEAufDQ4?fs=1&amp;h1=en_US&amp;rel=0">
<embed src=... />
</object>

将其替换为：

<iframe src="http://www.youtube.com/embed/O-jOEAufDQ4" style="max-width:100%"></iframe>

可以看到，两个视频的出路其实是不同的，youtube将用于移动设备显示的嵌入型视频放在embed目录下，这样大部分的移动设备就可以正常观看视频了。

国内的视频源可以用<iframe>这一招吗？

分别截取土豆和sina的各一段嵌入式视频代码可以看到用的都是object embed方式：

土豆：

<embed 
src="....swf" 
type="application/x-shockwave-flash" 
allowscriptaccess="always" 
allowfullscreen="true" 
wmode="opaque" 
width="480" height="400"></embed>

sina：

<div><object id='sinaplayer' width='480' height='370' >
<param name='allowScriptAccess' value='always' />
<embed pluginspage='http://www.macromedia.com/go/getflashplayer' 
src='....swf' 
type='application/x-shockwave-flash' 
allowScriptAccess='always'
allowFullScreen='true'
name='sinaplayer'  
width='480' height='370'></embed>
</object></div>

两者的参数设置也差不多，不过土豆的代码要简洁很多。

现在，用<iframe>代码块将土豆视频地址包起来，放入测试页面中，会发生一个问题：

（这是图片哦……）

不能全屏了……这是因为单独截取了播放地址，而与flash有关的例如allowFullScreen等设置都被抛弃了。那么用iframe这个方法显然就有两个问题了：

一是片源格式没有改变，还是swf格式，仍然不能被不支持Adobe Flash的手机播放。

二是因为丢失了flash播放器的参数设置，而丧失了部分功能。

这样显然是不能接受的。

对于第一点，只能期待视频网站使用更通用的视频格式来规避各个硬件厂商之间商业竞争带来的副作用；对于第二点，我们将继续使用object embed的方式，因为手机看不到flash格式的亲们已经找到了各种破解、插件来弥补了，所以web设计者在没有更通用片源格式的情况下，还是沿用之前的方式好了。

但是，视频格式的大小一般是固定的，只使用CSS而不使用javascript很难动态的根据设备的大小或者浏览器当前的尺寸来动态改变。就视频的宽度（width）而言，是可以设置成百分比的形式，如设置成容器的80%，那么该视频就会一直占其所在容器的80%的宽度，但是高度（height）就无法设定了，因为一般人都不会按比例去缩放浏览器窗口。要么是拉窄点，要么是缩短点。所以，靠百分比的方式来保证视频尺寸的缩放不太现实。

在这样的前提下，还是希望视频就保持一定的尺寸，而网页的其他部分根据浏览器的大小动态改变布局。

如视频所示：

 可以看到，在拉动浏览器的整个过程中，视频的尺寸是不改变的，直到浏览器的宽度小于视频的宽度时，视频的宽度才变小（使用了上面提到的Fluid Image Technique）。

制作整个效果没有什么新的技巧，也就是将CSS的尺寸判断又两种变成了三种而已。具体的可以看演示代码。

【演示代码在这里下载】

总结：

视频大小的自适应单靠CSS本身似乎是做不到的。而希望移动设备可以正常的观看页面视频还期待于视频网站使用更通用的视频格式而不是flash……

 

最后拿一个书中的公式收尾吧

RWD = Fluid-grid layouts + CSS media queries + Fluid Image/Media + a state of mind

大意是

响应式设计 = 流式网格布局 + @media语句 + 流式图片/媒体 + 设计者的意识

 

下集预告：

移动设备限于带宽、网速和运算芯片的处理速度，对网页的性能要求要高于桌面网页，那么该怎么办呢？如何测试我们页面的性能？如何设计才能有更好的性能让移动设备浏览起来更为流畅呢？