杭州web前端培训
达内杭州文教中心

13732203138

热门课程

如何利用css代码实现网页尺寸的不同比例适配

  • 时间:2019-01-09 17:14
  • 发布:杭州web培训
  • 来源:web问答

如何利用css代码实现网页尺寸的不同比例适配?

设计网页的时候,确定宽度是一件很苦恼的事。根据GoogleAnalytics的统计,半年多以来,访问者的屏幕分辨率一共有81种。小的分辨率是122x160,这应该是手机;大的分辨率是3360x1050,天知道是什么设备。

一张网页要在大小如此悬殊的各种屏幕上,都呈现令人满意的效果,难度可想而知。举例来说,一张400px宽的图片,在800px的屏幕上会占据50%的宽度,而在1920px的屏幕上(WindowsVista的流行设置),只占据20%。

目前,常见的屏幕分辨率宽度大概有6种:800px,1024px,1280px,1440px,1680px和1920px。其中,1024px常见,但是随着大屏幕显示器的流行,更高的分辨率正变得越来越多。

常见的解决方法有两种:

用javascript根据不同的客户端分辨率,选择css样式表文件。

采用弹性布局(FluidWidthLayout),实现网页宽度的自适应。

一种方法的优点是,可以根据不同屏幕分辨率,采用完全不同的布局,缺点是要设计和维护多张样式表,比较麻烦。二种方法只采用一张样式表,比较省事。

下文就根据css-tricks上的解决方案,讨论如何实现二种方法,实际上是很简单的。

先,网页的缺省宽度,确定为满足1024px宽度的显示器。这不仅因为1024x768是现在常见的分辨率,还因为这个宽度对网页合适:1)它放得下足够的内容,足够三栏的布局;2)单行文字不宜太长,1024px已是极限,否则容易产生阅读疲劳;3)在当前的互联网带宽条件下,网页难以采用大分辨率所要求的大尺寸图片。

其次,网页宽度会在780px-1260px的范围内,自动变化,即小不小于780px,大不超过1280px。

结尾,对于更大的分辨率,网页内容会自动居中。

预约申请免费试听课

怕钱不够?就业挣钱后再付学费!    怕学不会?从入学起,达内定制课程!     担心就业?达内多家实践企业供你挑选!

上一篇:没有上一篇了
下一篇:解密:前端工程师到底是做什么的?
选择城市和中心
贵州省

广西省

海南省