Web响应式设计(二)

前面我们说了媒体布局在响应式设计中的应用,但是同时它也有一定的局限性。那些仅使用媒体查询来适应不同视口的固定宽度设计,只会从一组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优秀组件的网站

你可能感兴趣的:(响应式设计,响应式布局)