唐山云时代
唐山云时代
新闻中心

当前位置:首页 > 新闻中心 > 企业门户

网站建设时如何进行自适应网页设计

随着移动网络的广泛应用,现在很多人已经习惯于手机上网。手机上网固然便捷,但是对于网站设计师而言,却又得面临新的难题:如何才能在不同大小的设备上呈现同样的网页?


手机和电脑的显示是有很大差别的,以前用电脑打开网站是很正常的,但是很可能在手机上的显示就非常的不适于人阅读。


很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,这样固然保证了效果,但是比较麻烦,同时要维护好几个版本,大大增加了架构设计的复杂度。


2010年,Ethan Marcotte提出了“自适应网页设计”这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。


“自适应网页设计”到底是怎么做到的?

首先,在网页代码的头部,加入一行viewport元标签。<meta name=”viewport”content=”width=device-width, initial-scale=1″ />viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。


由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。

“流动布局”的含义是,各个区块的位置都是浮动的,不是固定不变的。float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。


“自适应网页设计”的核心,就是CSS3引入的Media Query模块。它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。



除了布局和文本,”自适应网页设计”还必须实现图片的自动缩放。有条件的话,最好还是根据不同大小的屏幕,加载不同分辨率的图片。有很多方法可以做到这一条,服务器端和客户端都可以实现。