前面我们说了媒体布局在响应式设计中的应用，但是同时它也有一定的局限性。那些仅使用媒体查询来适应不同视口的固定宽度设计，只会从一组CSS 媒体查询规则突变到
另一组，两者之间没有任何平滑渐变。伊桑· 马科特在A List Apart 上发表的有关响应式网页设计的文章（http://www.alistapart.com/articles/responsive-web-design/ ）。其实
他采用的技术（流动布局、弹性图片和媒体查询）并不新颖，而将这些理念基于一套完整统一的方法论进行应用则很有创造性。对于很多网页设计工作来说，他的文章打开了很多
新的思路。事实上，这种网页设计的新方法做到了两全其美：使用百分比布局创建流动的弹性界面，同时使用媒体查询来限制元素的变动范围。将这两者组合到一起构成了响应
式设计的核心，基于此可以创造出真正完美的设计。
如何将网页从固定布局修改为百分比布局
在丹·锡德霍姆（Dan Cederholm ）编写的《无懈可击的Web 设计》一书种，提供了一个简易可行的公式，可以将固定像素宽度转换为百分比宽度：
目标元素宽度÷上下文元素宽度=百分比宽度
看上去很简单，如何来应用这个公式呢，我们来举个栗子：比如书中提到的这段html页面
<div id="wrapper">
<!-- the header and navigation -->
<div id="header">
<div id="navigation">
<ul>
<li><a href="#">navigation1</a></li>
<li><a href="#">navigation2</a></li>
</ul>
</div>
</div>
<!-- the sidebar -->
<div id="sidebar">
<p>here is the sidebar</p>
</div>
<!-- the content -->
<div id="content">
<p>here is the content</p>
</div>
<!-- the footer -->
<div id="footer">
<p>Here is the footer</p>
</div>
</div>它基于固定像素的样式是这样的：
#wrapper {
margin-right: auto;
margin-left: auto;
width: 960px;
}
#header {
margin-right: 10px;
margin-left: 10px;
width: 940px;
}
#navigation {
padding-bottom: 25px;
margin-top: 26px;
margin-left: -10px;
padding-right: 10px;
padding-left: 10px;
width: 940px;
}
#navigation ul li {
display: inline-block;
}
#content {
margin-top: 58px;
margin-right: 10px;
float: right;
width: 698px;
}
#sidebar {
border-right-color: #e8e8e8;
border-right-style: solid;
border-right-width: 2px;
margin-top: 58px;
padding-right: 10px;
margin-right: 10px;
margin-left: 10px;
float: left;
width: 220px;
}
#footer {
float: left;
margin-top: 20px;
margin-right: 10px;
margin-left: 10px;
clear: both;
width: 940px;
}下面我们来应用公式得出它的百分比宽度，首选我们讲最外层的元素wrapper的宽度设为96%,然后我们来如何计算header呢 940/960=97.9166666667%就是header的百分比宽度
下面是刚才那段样式改为百分比样式之后：
#wrapper {
margin-right: auto;
margin-left: auto;
width: 96%; /* 最外层 DIV */
}
#header {
margin-right: 10px;
margin-left: 10px;
width: 97.9166667%; /* 940 ÷ 960 */
}
#navigation {
padding-bottom: 25px;
margin-top: 26px;
margin-left: -10px;
padding-right: 10px;
padding-left: 10px;
width: 72.7083333%; /* 698 ÷ 960 */
}<p class="p1"><span style="font-family: Arial, Helvetica, sans-serif;">#navigation ul li {</span></p><p class="p1">display: inline-block;</p><p class="p1">margin-right: 2.6595745%; /* 25 ÷ 940 */</p><p class="p1">}</p><p class="p1">#navigation ul li a {</p><p class="p1">height: 42px;</p><p class="p1">line-height: 42px;</p><p class="p1">text-decoration: none;</p><p class="p1">text-transform: uppercase;</p><p class="p1">font-family: Arial, "Lucida Grande", Verdana, sans-serif;</p><p class="p1">font-size: 27px;</p><p class="p1">color: black;</p><p class="p1">}</p>
<p class="p1">#content {</p><p class="p1">margin-top: 58px;</p><p class="p1">margin-right: 10px;</p><p class="p1">float: right;</p><p class="p1">width: 72.7083333%; /* 698 ÷ 960 */</p><p class="p1">}</p><p class="p1">#sidebar {</p><p class="p1">border-right-color: #e8e8e8;</p><p class="p1">border-right-style: solid;</p><p class="p1">border-right-width: 2px;</p><p class="p1">margin-top: 58px;</p><p class="p1">margin-right: 10px;</p><p class="p1">margin-left: 10px;</p><p class="p1">float: left;</p><p class="p1">width: 22.7083333%; /* 218 ÷ 960 */</p><p class="p1">}</p><p class="p1">#footer {</p><p class="p1">float: left;</p><p class="p1">margin-top: 20px;</p><p class="p1">margin-right: 10px;</p><p class="p1">margin-left: 10px;</p><p class="p1">clear: both;</p><p class="p1">width: 97.9166667%; /* 940 ÷ 960 */</p><p class="p1">}</p>
如果在完成了所有文字排版后，用户又提出将页面文字统一放大一点，我们就可以只修改body 的文字大小，其他所有文字也会相应变大。上面的公式业同样适用与字体，
给body上加上下面的字体
font-size: 100%;
font-size: 16px;
font-size: 1em;
如果logo的字体是48px,那么现在就是font-size:3em，48/16=3那么什么是em呢
em 是书面形式的大写字母“ M”的简称，发音和 M相同。以前，“ M”常被用来测定某种字体的大小，因为它是英文字母中最大（最宽）的字母。如今， em作为一个测量单位，
指的是特定字母的宽度和高度相对于特定字体磅值的比例。
与em类似的是rem，它们的区别是em是相对与父元素的比例，rem是相对于根元素的比例。
弹性图片
在浏览器种实现图片随着流动布局相应缩放非常的简单，只需要加入如下的样式：
img {
<span style="white-space:pre"> </span>max-width: 100%;
}这样就可以让图片自动缩放了。
为不同尺寸的视口提供不同的图片
<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">
css代码为
@media (min-device-width:600px) { img[data-src-600px] { content: attr(data-src-600px, url); } } @media (min-device-width:800px) { img[data-src-800px] { content: attr(data-src-800px, url); } }响应式视频
html5中视频插入变得很简洁
<video src="myVideo.ogg"></video>
只需要一个video标签就可以搞定。如果需要确定视频的宽度和高度，只需要加上width和height属性
<video src="video/myVideo.mp4" width="640" height="480">What, do you mean you don't understand HTML5?</video>
其余的属性还包括用来控制媒体预加载的preload （HTML5 的早期尝鲜者应该注意preload 替代了原先的autobuffer ），用来重复播放视频的loop ，以及用来定义视频
缩略图的poster （这个属性在视频播放延迟时非常有用）。要使用某个属性，将其追加到标签中即可。下面的例子包含了刚才提到的所有属性：
<video src="video/myVideo.mp4" width="640" height="480" controls autoplay preload="auto" loop poster="myVideoPoster.jpg">What, do you mean you don't understand HTML5?</video>
这种方法并不能免除我们为一个媒体文件创建多种版本。我们都期望这个问题在将来某个适当的时刻会自行解决，此时我们手握多种格式的媒体文件，则可以这样编写视频标签：
<video width="640" height="480" controls autoplay preload="auto" loop poster="myVideoPoster.jpg">
<source src="video/myVideo.ogv" type="video/ogg">
<source src="video/myVideo.mp4" type="video/mp4">
What, do you mean you don't understand HTML5?
</video>
然而上面的视频却不能随着页面响应式的缩放，怎么来实现这一点呢
<video src="myVideo.ogg"></video>
我们可以再video标签上应用下面的样式：
video { max-width: 100%; height: auto; }
这样就可以实现缩放了，但是它却解决不了使用iframe嵌入视频的相应问题，比如<iframe width="960" height="720" src="http://www.youtube.com/embed/B1_N28DA3gY"
frameborder="0" allowfullscreen></iframe>
我们可以通过一个jquery插件来解决这个问题--fitvids.我们只需要从http://fitvidsjs.com上下载FitVids插件，加入到页面上<script>
$(document).ready(function(){
// Target your .container, .wrapper, .post, etc.
$("#content").fitVids();
});
</script>
最后附上响应式设计相关的网站：
http://mediaqueri.es/ 响应式创意网站
http://bradfrost.github.io/this-is-responsive/patterns.html responsive patterns
https://www.smashingmagazine.com/2009/06/smart-fixes-for-fluid-layouts/?utm_source=caibaojian.com
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
