前面我们说了媒体布局在响应式设计中的应用,但是同时它也有一定的局限性。那些仅使用媒体查询来适应不同视口的固定宽度设计,只会从一组CSS 媒体查询规则突变到另一组,两者之间没有任何平滑渐变。伊桑· 马科特在A List Apart 上发表的有关响应式网页设计的文章(http://www.alistapart.com/art... )。其实他采用的技术(流动布局、弹性图片和媒体查询)并不新颖,而将这些理念基于一套完整统一的方法论进行应用则很有创造性。对于很多网页设计工作来说,他的文章打开了很多新的思路。事实上,这种网页设计的新方法做到了两全其美:使用百分比布局创建流动的弹性界面,同时使用媒体查询来限制元素的变动范围。将这两者组合到一起构成了响应式设计的核心,基于此可以创造出真正完美的设计。
如何将网页从固定布局修改为百分比布局
在丹·锡德霍姆(Dan Cederholm )编写的《无懈可击的Web 设计》一书种,提供了一个简易可行的公式,可以将固定像素宽度转换为百分比宽度:
目标元素宽度÷上下文元素宽度=百分比宽度
看上去很简单,如何来应用这个公式呢,我们来举个栗子:
比如书中提到的这段html页面
here is the content
它基于固定像素的样式是这样的:
#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 */
}
#navigation ul li {
display: inline-block;
margin-right: 2.6595745%; /* 25 ÷ 940 */
}
#navigation ul li a {
height: 42px;
line-height: 42px;
text-decoration: none;
text-transform: uppercase;
font-family: Arial, "Lucida Grande", Verdana, sans-serif;
font-size: 27px;
color: black;
}
#content {
margin-top: 58px;
margin-right: 10px;
float: right;
width: 72.7083333%; /* 698 ÷ 960 */
}
#sidebar {
border-right-color: #e8e8e8;
border-right-style: solid;
border-right-width: 2px;
margin-top: 58px;
margin-right: 10px;
margin-left: 10px;
float: left;
width: 22.7083333%; /* 218 ÷ 960 */
}
#footer {
float: left;
margin-top: 20px;
margin-right: 10px;
margin-left: 10px;
clear: both;
width: 97.9166667%; /* 940 ÷ 960 */
}
接下来要做的是用em替换px,
标签设置文字大小为100%,给其他文字都使用相对单位em,那这些文字都会受body上的初始声明的影响。这样做的好处就是,
如果在完成了所有文字排版后,用户又提出将页面文字统一放大一点,我们就可以只修改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 {
max-width: 100%;
}
这样就可以让图片自动缩放了。
为不同尺寸的视口提供不同的图片
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标签就可以搞定。如果需要确定视频的宽度和高度,只需要加上width和height属性
其余的属性还包括用来控制媒体预加载的preload (Html5 的早期尝鲜者应该注意preload 替代了原先的autobuffer ),用来重复播放视频的loop ,以及用来定义视频
缩略图的poster (这个属性在视频播放延迟时非常有用)。要使用某个属性,将其追加到标签中即可。下面的例子包含了刚才提到的所有属性:
这种方法并不能免除我们为一个媒体文件创建多种版本。我们都期望这个问题在将来某个适当的时刻会自行解决,此时我们手握多种格式的媒体文件,则可以这样编写视频标签:
What, do you mean you don't understand HTML5?
然而上面的视频却不能随着页面响应式的缩放,怎么来实现这一点呢
我们可以再video标签上应用下面的样式:
video { max-width: 100%; height: auto; }
这样就可以实现缩放了,但是它却解决不了使用iframe嵌入视频的相应问题,比如
我们可以通过一个jquery插件来解决这个问题--fitvids.我们只需要从http://fitvidsjs.com上下载FitVids插件,加入到页面上
最后附上响应式设计相关的网站:
http://mediaqueri.es/ 响应式创意网站
http://bradfrost.github.io/th... responsive patterns
https://www.smashingmagazine....
部分文字摘自「Responsive Web Design with HTML5 & CSS3」
最后推荐下轮子工厂--一个分享vue,angular优秀组件的网站