QQ 1640076782

2014年10月31日

通过CSS3 Media Queries实现网页自适应不同尺寸屏幕

Filed under: 英语网站设计 — 标签:, , — lifengwu @ 4:28 上午

随着智能手机的普及,多数人也不再仅仅用电脑来浏览网页、搜索东西,现在有手机,平板电脑等等。所以原来固定宽度的设计在手机、平板上浏览体验并不好,因此我们的网页需要有自适应性。网页的布局需要能够根据不同的分辨率和设备来自动调整,以达到到最佳显示效果、提供更好的用户体验,下面我们来看看:

正常效果

比较窄的效果

最窄的效果

当屏幕分辨率大于1024px时,网页宽度将会是960px。通过Media query来检验屏幕分辨率,如果小于960px,页面宽度将会用自适应来取代固定宽度;如果小于600px,主题和边栏将会撑满屏幕并一列显示。当小于480px时,主题和左侧栏会在一栏显示

代码就不贴了,太多

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

<meta name=”viewport” content=”width=device-width, initial-scale=1″ />

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

我们需要通过CSS3 Media Queries 来对不同的屏幕定义不同的样式

<link href=”media-queries.css” rel=”stylesheet” type=”text/css”>

这个样式可以根据实际情况和实际需要来写

此外由于IE8或者更低的版本不支持CSS3媒体查询,但通过添加脚本 css3-mediaqueries.js来实现这一功能。

<!–[if lt IE 9]>
<script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script>
<![endif]–>

这样基本来在不同的屏幕上浏览就不会有什么问题了,不过还有许多细节方面的问题需要注意!