乌徒帮乌徒帮闲语 › 制作自适应屏幕宽度的网页

制作自适应屏幕宽度的网页

分类:乌徒帮闲语

随着移动设备浏览网页频率的上升,网站开发者开始试图研究如何能够让网页自动适应屏幕宽度而进行自动布局调整[自适应网页设计(Responsive Web Design)]的问题。自动适应屏幕的网页不仅让网站看起来更酷,更关键的是让访问者感觉到人性化,让读者觉得网站主专门为自己设计了更加适合阅读的网页而表示赞赏。那么如何实现自适应屏幕宽度的网页呢?本文就来讨论一下这个话题!

1、自适应网页设计的意义

简短的说,Responsive Web Design是为网页在不同大小的设备上可以被查看而诞生的,网页不单单在电脑屏幕上可以很好的表现出网页主想要的布局,同时可以用同一套代码,却能适应诸如Pad,Phone等屏幕的大小。我们可以用相同的代码,让网页专门为iPad显示一种布局,同时让它在更小的手机屏幕上更为适合阅读。这种设计思路让读者感到舒适,是网页设计新时代的产物。

2、自适应网页的前提

并非进行了自适应网页设计,网页就一定会按照设计者所愿望的,在不同设备,不同宽度的屏幕上显示不同的效果。结果可能并不如意,有的时候这些设计反而会让网页显得杂乱。自适应的网页是有前提的:

设备支持你的自适应设计!

我们可以举例一些不可能支持自适应设计的设备,例如国产手机的WAP浏览器,非智能机上的UC浏览器。包括IE6-IE8都是不支持这种自适应的,不过我们可以用别人开发的一些js脚本让这些老套的浏览器支持,而一些手机浏览器是绝对不会支持的,你就不用太费心了,你可以用退而求其次的方法,设计出尽量让这些设备上的用户方便阅读的网页,然而,此路不通。

3、自适应网页设计的老思路

说实话,在Responsive Web Design出现之前,我们已经在思考这个问题了,我们希望当缩小或还原浏览器的时候,我们的网页可以跟随变化,以至于不用让读者滑动浏览器滚动条才能阅读。

1)用百分比来规定宽度;
2)用javascript获取window的宽度,根据window onresize的变化来处理元素的样式;

这是之前最行之有效的办法了,然而新的移动设备拥有了4寸,甚至10寸的屏幕之后,它们还提供了一个借口:viewport元标签,这让自适应只需通过css就能实现了。

4、实现Responsive Web Design

那么究竟如何实现Responsive Web Design,其实也非常简单,我们为不同的设备准备不同的css,最关键的在于判断当前设备使用哪一部分的css而已。

在你的网页<head>部分加入

[code lang="php" line="1"]

[/code]

viewport元标签引入了设备管理,通过对设备进行区分采取不同的方案。

所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js

[code lang="php" line="1"]

[/code]

在使用自适应设计时,你最好还要遵循下面的一些原则:

1)不使用绝对宽度;
2) 相对大小的字体;
3)流动布局:各个区块的位置是浮动的,不是固定不变的;
4)图片(<img>)和插件 (<object>)的宽度和高度根据屏幕的变化自动缩放:max-width,max-height的妙用。

在这些所有的必备因素解决之后,我们要对最关键的css进行管理,我们创造不同的css来在不同的设备上进行不同的显示,然而,如何进行这个“不同”的定义呢?

根据不同的屏幕加载不同的css

[code lang="php" line="1"] [/printCode]

这一句让屏幕在小于400px时选择加载tinyScreen.css这个css文件

[printCode lang="php" line="1"] [/code]

这就让屏幕宽度在400px到800px时选择middleScreen.css进行页面样式的渲染。不过,这个地方需要注意的是,min-width不是指设备最小宽度,而是屏幕的最小宽度,而是为了绕开前面已经定义的max-device-width。其实,任何设备的宽度都是固定的,我们只希望用max-device-width对设备进行挑剔,在这个区间内的设备则会进行渲染,min-width常常反映在当我们在PC屏幕上缩小浏览器时的效果。

外部加载css可以进行设备的挑选,而一个css内部也可以进行设备的挑选。如果你只是为网页加载了一个css文件,那么可以在该css文件中,使用@media规则

[code lang="css" line="1"]
@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}
[/code]

如果你的设备屏幕小于400px,那么不好意思,#sidebar将被藏起来了。极其多的案例中,就是通过这种由于屏幕大小改变,把适合的显示出来,把不适合的隐藏起来的思路,实现了在不同设备上自动适应的网页设计。

填写个人信息,赶快回复吧!