网站建设资讯

NEWS

网站建设资讯

HTML网页设计自适应屏幕宽度

今天小编就为大家带来一篇HTML网页设计自适应屏幕宽度的文章。小编觉得挺不错的,为此分享给大家做个参考。一起跟随小编过来看看吧。

创新互联建站长期为上千多家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为衢州企业提供专业的网站建设、成都做网站,衢州网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。

允许网页宽度自动调整

“自适应网页设计”到底是怎么做到的?其实并不难。

首先,在网页代码的头部,加入一行viewport元标签。

viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。

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

不使用绝对宽度

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

具体说,CSS代码不能指定像素宽度:width:xxx px;只能指定百分比宽度:width: xx%;或者width:auto;

关于HTML网页设计自适应屏幕宽度就分享到这里了,解决问题并不止文章中和大家分析的办法,不过本文分析的方法准确性是不容置疑的。如果喜欢本篇文章,不妨把它分享出去让更多的人看到。


当前文章:HTML网页设计自适应屏幕宽度
本文路径:http://cdweb.net/article/phdojd.html